Сообщение от Marv
|
Не знаком с данным вопросом, поэтому объясню, возможно, немного непонятно. Задача такая: пользователь загружает картинку, мы добавляем к ней логотип и возвращаем новое изображение как файл на скачивание.
Есть пожелание делать все на стороне клиента.
Что лучше использовать? Canvas? У него есть метод, который возвращает содержимое toDataURL(). Для svg про такое не слышал. Возможно ли вообще, что бы js автоматически отдавал какие-нибудь данные для скачивания не с сервера, а из результов работы самого js?
Можно ли как-то, не загружая картинку на сервер, обработать ее в js скрипте?
|
Всё можно но с кучей оговорок.
Примерно так:
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: #000;
color: #fff;
}
canvas{
background:-moz-linear-gradient(45deg, white 26%, transparent 25%, transparent 75%, white 75%),
-moz-linear-gradient(45deg, white 26%, rgb(217,217,217) 25%, rgb(217,217,217) 75%, white 75%);
background:-o-linear-gradient(45deg, white 26%, transparent 25%, transparent 75%, white 75%),
-o-linear-gradient(45deg, white 26%, rgb(217,217,217) 25%, rgb(217,217,217) 75%, white 75%);
background:-webkit-linear-gradient(45deg, white 26%, transparent 25%, transparent 75%, white 75%),
-webkit-linear-gradient(45deg, white 26%, rgb(217,217,217) 25%, rgb(217,217,217) 75%, white 75%);
background:linear-gradient(45deg, white 26%, transparent 25%, transparent 75%, white 75%),
linear-gradient(45deg, white 26%, rgb(217,217,217) 25%, rgb(217,217,217) 75%, white 75%);
background-size:20px 20px;
background-position: 0 0, 10px 10px;
display:block;
}
a{color: #a00}
a:hover{color: #f00}
</style>
</head>
<body>
<input type="file" id="input" onchange="handleFiles(this.files)">
<canvas id="canvas" width=100 height=100></canvas>
<a href="#" id="download" download="ingvithlogo.png">download</a>
<script type="text/javascript">
function handleFiles(files){
var canvas = document.getElementById('canvas'),
download = document.getElementById('download'),
ctx = canvas.getContext('2d'),
img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
ctx.font = '20px Georgia,serif'
ctx.strokeStyle = "#0F0";
ctx.strokeText('=^_^=', 5, canvas.height-5);
download.href = canvas.toDataURL();
}
img.src = URL.createObjectURL(files[0]);
}
</script>
</body>
</html>
А верное решение на текрущий момент в большинстве случаев:
|
Сообщение от Marv
|
|
Или мне не заморачиваться со всем этим и просто использовать php + gd?
|