Как сохранить холст HTML5 в виде изображения на сервере?
Я работаю над генеративным художественным проектом, где я хотел бы позволить пользователям сохранять полученные изображения из алгоритма. Общая идея:
- создайте изображение на холсте HTML5, используя генеративный алгоритм
- когда изображение будет завершено, позвольте пользователям сохранить холст в виде файла изображения на сервере
- разрешить пользователю либо загрузить изображение, либо добавить его в галерею произведенных с помощью алгоритм.
тем не менее, я застрял на второй ступени. После некоторой помощи от Google, я нашел этот блоге, что, казалось, было именно тем, чего я хотел:
что привело к коду JavaScript:
function saveImage() {
var canvasData = canvas.toDataURL("image/png");
var ajax = new XMLHttpRequest();
ajax.open("POST", "testSave.php", false);
ajax.onreadystatechange = function() {
console.log(ajax.responseText);
}
ajax.setRequestHeader("Content-Type", "application/upload");
ajax.send("imgData=" + canvasData);
}
и соответствующий PHP (testSave.php):
<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) {
$imageData = $GLOBALS['HTTP_RAW_POST_DATA'];
$filteredData = substr($imageData, strpos($imageData, ",") + 1);
$unencodedData = base64_decode($filteredData);
$fp = fopen('/path/to/file.png', 'wb');
fwrite($fp, $unencodedData);
fclose($fp);
}
?>
но это, кажется, вообще ничего не делает.
больше гуглить оказывается это блоге который основан на предыдущем уроке. Не очень разные, но, возможно, стоит попробовать:
$data = $_POST['imgData'];
$file = "/path/to/file.png";
$uri = substr($data,strpos($data, ",") + 1);
file_put_contents($file, base64_decode($uri));
echo $file;
этот создает файл (yay), но он поврежден и, похоже, ничего не содержит. Он также кажется пустым (размер файла 0).
есть ли что-то действительно очевидное, что я делаю неправильно? Путь, в котором я храню свой файл, доступен для записи, так что это не проблема, но ничего не происходит, и я не уверен, как это отладить.
редактировать
после ссылки Salvidor дали I изменен запрос AJAX на:
function saveImage() {
var canvasData = canvas.toDataURL("image/png");
var xmlHttpReq = false;
if (window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
ajax.open("POST", "testSave.php", false);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.onreadystatechange = function() {
console.log(ajax.responseText);
}
ajax.send("imgData=" + canvasData);
}
и теперь файл изображения создан и не пуст! Кажется, что тип контента имеет значение и что изменение его на x-www-form-urlencoded
разрешено отправлять данные изображения.
консоль возвращает (довольно большую) строку кода base64, а файл данных - ~140 КБ. Однако я все еще не могу открыть его, и он, похоже, не отформатирован как изображение.
7 ответов
вот пример того, как достичь того, что вам нужно:
1) нарисуйте что-нибудь (взято из холст уроке)
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// begin custom shape
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);
// complete custom shape
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = 'blue';
context.stroke();
</script>
2) преобразование изображения холста в формат URL (base64)
var dataURL = canvas.toDataURL();
3) отправить его на сервер через AJAX
$.ajax({
type: "POST",
url: "script.php",
data: {
imgBase64: dataURL
}
}).done(function(o) {
console.log('saved');
// If you want the file to be visible in the browser
// - please modify the callback in javascript. All you
// need is to return the url to the file, you just saved
// and than put the image in your browser.
});
3) сохранить base64 на сервере в виде изображения (здесь как это сделать в PHP, те же идеи есть в каждом языке. Серверная сторона в PHP может быть найти здесь):
Я играл с этим две недели назад, это очень просто. Единственная проблема заключается в том, что все учебники просто говорят о сохранении изображения локально. Вот как я это сделал:--3-->
1) я настроил форму, чтобы я мог использовать метод POST.
2) когда пользователь закончит рисовать, он может нажать кнопку "Сохранить".
3) при нажатии кнопки я беру данные изображения и помещаю их в скрытое поле. После этого я представляю форму.
document.getElementById('my_hidden').value = canvas.toDataURL('image/png');
document.forms["form1"].submit();
4) Когда форма отправлено у меня есть этот маленький PHP скрипт:
<?php
$upload_dir = somehow_get_upload_dir(); //implement this function yourself
$img = $_POST['my_hidden'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir."image_name.png";
$success = file_put_contents($file, $data);
header('Location: '.$_POST['return_url']);
?>
Я думаю, что вы должны передавать изображение в base64 на изображение с blob, потому что при использовании изображения base64 требуется много строк журнала или много строк будет отправлено на сервер. С blob, это только файл. Вы можете использовать этот код ниже:
dataURLtoBlob = (dataURL) ->
# Decode the dataURL
binary = atob(dataURL.split(',')[1])
# Create 8-bit unsigned array
array = []
i = 0
while i < binary.length
array.push binary.charCodeAt(i)
i++
# Return our Blob object
new Blob([ new Uint8Array(array) ], type: 'image/png')
и код холста здесь:
canvas = document.getElementById('canvas')
file = dataURLtoBlob(canvas.toDataURL())
после этого вы можете использовать ajax с формой:
fd = new FormData
# Append our Canvas image file to the form data
fd.append 'image', file
$.ajax
type: 'POST'
url: '/url-to-save'
data: fd
processData: false
contentType: false
этот код использует синтаксис CoffeeScript.
отправить изображение холста на PHP:
var photo = canvas.toDataURL('image/jpeg');
$.ajax({
method: 'POST',
url: 'photo_upload.php',
data: {
photo: photo
}
});
вот PHP скрипт:photo_upload.php
<?php
$data = $_POST['photo'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
mkdir($_SERVER['DOCUMENT_ROOT'] . "/photos");
file_put_contents($_SERVER['DOCUMENT_ROOT'] . "/photos/".time().'.png', $data);
die;
?>
В дополнение к ответу Сальвадора Дали:
на стороне сервера, не забывайте, что данные в base64 строка. Это важно, потому что в некоторых языках программирования вам нужно прямо сказать, что эта строка должна рассматриваться как байт не простая строка Unicode.
декодирования, в противном случае не будет работать: изображение будет сохранено, но это будет нечитаемый файл.
Я работал над чем-то подобным.
Пришлось конвертировать canvas кодировка Base64 изображение Uint8Array Blob
.
function b64ToUint8Array(b64Image) {
var img = atob(b64Image.split(',')[1]);
var img_buffer = [];
var i = 0;
while (i < img.length) {
img_buffer.push(img.charCodeAt(i));
i++;
}
return new Uint8Array(img_buffer);
}
var b64Image = canvas.toDataURL('image/jpeg');
var u8Image = b64ToUint8Array(b64Image);
var formData = new FormData();
formData.append("image", new Blob([ u8Image ], {type: "image/jpg"}));
var xhr = new XMLHttpRequest();
xhr.open("POST", "/api/upload", true);
xhr.send(formData);