Javascript-форум - Что лучше использовать, canvas или svg?

Цитата:

Сообщение от Marv (Сообщение 205392)

Не знаком с данным вопросом, поэтому объясню, возможно, немного непонятно. Задача такая: пользователь загружает картинку, мы добавляем к ней логотип и возвращаем новое изображение как файл на скачивание.

Есть пожелание делать все на стороне клиента.

Что лучше использовать? 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 (Сообщение 205392)

Или мне не заморачиваться со всем этим и просто использовать php + gd?