Javascript: сохранение из холста не работает
Я новичок в JavaScript и пытаюсь сохранить подпись с холста. Когда я нажимаю Отправить Кнопка нового окна должна открыться в браузере и сохранить содержимое холста, но это не работает. Я проверил Исеть чтобы убедиться, что кнопка работает.
Код:
<?php
if(isset($_POST['submit']))
{
?>
<script>
var canvas = document.getElementById("canvas");
var w=window.open('about:blank','image from canvas');
w.document.write("<img src='"+canvas.toDataURL("image/png")+"' alt='from canvas'/>");
</script>
<?php
}
?>
Решение
Вы могли бы сделать что-то вроде этого. Вытащите изображение base64 из холста, опубликуйте его в бэкэнде, обработайте результат (в переднем конце).
// IGNORE (DRAW STUFF)
// Source: http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-url/
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// draw cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = '#0000ff';
context.stroke();
// STOP IGNORING<canvas id="canvas" width="600" height="200"></canvas>
<button onclick="sendImageToBackend()">Send it to backend!</button>
<script>
function getCanvasImage() {
var canvas = document.getElementById('canvas');
return (canvas) ? canvas.toDataURL('image/png') : false;
}
function sendImageToBackend() {
var url = 'save.php';
var dataURL = getCanvasImage();
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function () {
var responseImg;
// Handle response from save.php
if (this.status === 200) {
responseImg = document.createElement('IMG');
responseImg.src = this.responseText;
document.body.appendChild(responseImg);
} else {
console.log('Errorz happened!', this.responseText);
}
};
xhr.send('data=' + encodeURIComponent(dataURL));
}
</script>Другие решения
Других решений пока нет …
detector