Я работаю над генеративным художественным проектом, в котором я хотел бы позволить пользователям сохранять полученные изображения из алгоритма. Общая идея такова:
- Создайте изображение на холсте 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);
}
?>
Но это, похоже, ничего не делает.
Еще Googling поднимает этот пост в блоге, который основан на предыдущем уроке. Не сильно отличается, но, возможно, стоит попробовать:
$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).
Есть ли что-то действительно очевидное, что я делаю не так? Путь, где я храню свой файл, доступен для записи, так что это не проблема, но, похоже, ничего не происходит, и я не совсем уверен, как это отладить.
редактировать
Следуя ссылке Сальвидора Дали, я изменил запрос 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 КБ. Тем не менее, я до сих пор не могу открыть его, и он, кажется, не отформатирован как изображение.
источник
ajax.send(canvasData );
пока вы его используетеajax.send("imgData="+canvasData);
. Поэтому$GLOBALS["HTTP_RAW_POST_DATA"]
не будет то, что вы ожидаете, вы, вероятно, должны использовать$_POST['imgData']
.$data
во втором php-коде), все, что я получаю, это пустая строка. С чего бы это? Кажется, что, возможно, отправляемые данные не верны, но похоже, что я отправляю их точно так же, как показывают примеры ...DataUriUpload
компонентом. Это задокументировано здесь и поставляется с несколькими дополнительными средствами проверки и обеспечения безопасности.Ответы:
Вот пример того, как достичь того, что вам нужно:
1) Нарисуйте что-нибудь (взято из учебника по холсту )
2) Преобразовать изображение холста в формат URL (base64)
3) Отправить его на свой сервер через Ajax
3) Сохраните base64 на своем сервере в виде изображения (вот как это сделать в PHP , те же идеи есть в каждом языке. Серверную часть в PHP можно найти здесь ):
источник
You send it to your server as an ajax request
этот метод требует подтверждения пользователя? Или я могу молча отправить изображение с холста на сервер?Я играл с этим две недели назад, это очень просто. Единственная проблема заключается в том, что во всех руководствах рассказывается только о сохранении изображения локально. Вот как я это сделал:
1) Я настроил форму, чтобы я мог использовать метод POST.
2) Когда пользователь закончит рисование, он может нажать кнопку «Сохранить».
3) Когда кнопка нажата, я беру данные изображения и помещаю их в скрытое поле. После этого я отправляю форму.
4) Когда форма отправлена, у меня есть небольшой скрипт php:
источник
Я думаю, что вы должны перенести изображение в base64 на изображение с BLOB-объектами, потому что когда вы используете base64-изображение, это займет много строк журнала или много строк отправит на сервер. С blob, это только файл. Вы можете использовать этот код ниже:
И код холста здесь:
После этого вы можете использовать ajax с Form:
Этот код использует синтаксис CoffeeScript.
если вы хотите использовать javascript, пожалуйста, вставьте код в http://js2.coffee
источник
Отправить изображение холста в PHP:
Вот PHP-скрипт:
photo_upload.php
источник
Если вы хотите сохранить данные, полученные из
canvas.toDataURL()
функции Javascript , вы должны конвертировать пробелы в плюсы. Если вы этого не сделаете, декодированные данные будут повреждены:http://php.net/manual/ro/function.base64-decode.php
источник
Я работал над чем-то похожим. Пришлось конвертировать холст Base64-кодированное изображение в
Uint8Array Blob
.источник
В дополнение к ответу Сальвадора Дали:
на стороне сервера не забывайте, что данные поступают в формате строки base64 . Это важно, потому что в некоторых языках программирования вам нужно четко сказать, что эту строку следует рассматривать как байты, а не как простую строку Юникода.
В противном случае декодирование не будет работать: изображение будет сохранено, но это будет нечитаемый файл.
источник