Поле для личной подписи, автографа

Поле для личной подписи, автографа

Сделано на canvas, работает как на десктопе, так и на "тач" устройствах. Итоговое изображение можно сохранить в jpg файл.

Пример:

Код ниже. Он кажется большим, но по сути там : 1 canvas поле, 3 функции для рисования и 2 для сохранения/сброса и всё. Не забудьте поменять пути к скрипту /path/to/sign.php.

<?php
if ($_POST['signature']) { // сохраняем в файл
	$_POST['signature'] = str_replace(['data:image/jpeg;base64,', ' '], ['', '+'], $_POST['signature']);
	if (file_put_contents('sign.jpg', base64_decode($_POST['signature']))) {
		echo 'sign.jpg'; exit;
	}
}
?>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<canvas id="signature" width="400" height="240" style="border: 1px solid"></canvas><br /><br />
<button id="signature-save">Сохранить</button>
<button id="signature-clear">Очистить</button>
<script>
	var canvas = document.getElementById("signature"),
		context = canvas.getContext("2d"),
		mouse = {x:0, y:0},
		draw = false;

	context.fillStyle = "white"; // белый фон
	context.fillRect(0, 0, canvas.width, canvas.height);

	['mousedown', 'touchstart'].forEach(function (eventName) { // касание экране, начало рисования
		canvas.addEventListener(eventName, function(e){
			e.preventDefault();
			draw = true;
			mouse = {
				x: ((eventName === 'mousedown') ? e.pageX : e.touches[0].pageX) - this.offsetLeft,
				y: ((eventName === 'mousedown') ? e.pageY : e.touches[0].pageY) - this.offsetTop
			}
			context.beginPath();
			context.moveTo(mouse.x, mouse.y);
			context.lineTo(mouse.x+1, mouse.y+1);
			context.stroke();
		});
	});

	['mousemove', 'touchmove'].forEach(function (eventName) { // движение мыши/пальца
		canvas.addEventListener(eventName, function(e){
			e.preventDefault();
			if (draw === true){
				mouse = {
					x: ((eventName === 'mousemove') ? e.pageX : e.touches[0].pageX) - this.offsetLeft,
					y: ((eventName === 'mousemove') ? e.pageY : e.touches[0].pageY) - this.offsetTop
				}
				context.lineTo(mouse.x, mouse.y);
				context.stroke();
			}
		});
	});

	['mouseup', 'touchend'].forEach(function (eventName) { // окончание
		canvas.addEventListener(eventName, function (e) {
			e.preventDefault();
			if (eventName === 'mouseup') {
				mouse = {
					x: e.pageX - this.offsetLeft,
					y: e.pageY - this.offsetTop
				}
				context.lineTo(mouse.x, mouse.y);
				context.stroke();
			}
			context.closePath();
			draw = false;
		});
	});

	document.getElementById('signature-save').addEventListener('click', function () { // ajax запрос на сохранение
		let ajax = new XMLHttpRequest();
		ajax.open("POST", "/path/to/sign.php");
		ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		ajax.onload = function() {
			let link = document.createElement("a");
			link.setAttribute("href", ajax.responseText);
			link.setAttribute("download", 'sign.jpg');
			link.click();
		}
		ajax.send("signature=" + document.getElementById("signature").toDataURL('image/jpeg'));
	});

	document.getElementById('signature-clear').addEventListener('click', function () { // очищаем 
		var canvas = document.getElementById("signature"),
			context = canvas.getContext("2d");
		context.fillStyle = "white";
		context.fillRect(0, 0, canvas.width, canvas.height);
	});
</script>

Есть вопросы или нашли ошибку? Напишите комментарий (можно без регистрации), отвечать стараюсь быстро.