У меня есть холст, и я хочу загрузить контекст canvas на сервер с помощью ajax и php. Я хочу, чтобы конечный результат был изображением, хранящимся на сервере. Я сделал загрузку изображений с помощью формы. Но теперь я хочу, чтобы контекст canvas конвертировал его в изображение и загружал на сервер!
Итак, как я могу это сделать? Любые предложения, algos или решения оценены!
В этом блоге aptly описывается метод сохранения холстов на сервере с помощью запросов AJAX, я думаю, это должно быть подходящим для вас.
В принципе, вам понадобится var canvasData = testCanvas.toDataURL("image/png"); для получения содержимого холста в JavaScript. Это будет закодированная в Base64 строка, примерно такая: data:image/png;base64,fooooooooooobaaaaaaaaaaar== .
Следующий код гарантирует, что запрос AJAX отправит содержимое в HTML:
var ajax = new XMLHttpRequest(); ajax.open("POST",'testSave.php',false); ajax.setRequestHeader('Content-Type', 'application/upload'); ajax.send(canvasData);
На сервере, в скрипте PHP, в HTTP_RAW_POST_DATA $GLOBALS будет HTTP_RAW_POST_DATA ключ с именем HTTP_RAW_POST_DATA , который будет содержать данные, которые мы только что выбрали.
// Remove the headers (data:,) part. $filteredData=substr($GLOBALS['HTTP_RAW_POST_DATA'], strpos($GLOBALS['HTTP_RAW_POST_DATA'], ",")+1); // Need to decode before saving since the data we received is already base64 encoded $decodedData=base64_decode($filteredData); $fp = fopen( 'test.png', 'wb' ); fwrite( $fp, $decodedData); fclose( $fp );
Конечно, test.png – это имя файла, которое вы сохраните. Первая строка требуется для удаления data:image/png;base64, часть кодированного изображения, чтобы впоследствии можно было декодировать base64_decode() . Его вывод ( $decodedData ) будет сохранен в файле.