cargando el contexto del lienzo como imagen usando ajax y php

Question

Tengo un lienzo y quiero cargar el contexto del lienzo al servidor usando ajax y php. Quiero que el resultado final sea una imagen almacenada en el servidor. He hecho la carga de imágenes usando form. ¡Pero ahora quiero que el contexto canvas lo convierta en imagen y lo cargue en el servidor!

Entonces, ¿cómo puedo hacer eso? ¡Cualquier sugerencia, algos o soluciones son apreciadas!

Answer 1

This blog post acertadamente describe el método de guardar lienzos en el servidor con consultas AJAX, supongo que esto debería ser adecuado para usted.

Básicamente, necesitará un var canvasData = testCanvas.toDataURL("image/png"); para recuperar los contenidos del lienzo en JavaScript. Esta será una cadena codificada Base64, algo como esto: data:image/png;base64,fooooooooooobaaaaaaaaaaar==.

El siguiente código se asegurará de que la consulta AJAX envía el contenido al código HTML:

var ajax = new XMLHttpRequest(); 
ajax.open("POST",'testSave.php',false); 
ajax.setRequestHeader('Content-Type', 'application/upload'); 
ajax.send(canvasData); 

En el servidor, en el script PHP, tendrá una clave denominada HTTP_RAW_POST_DATA en la matriz $GLOBALS, esta voluntad contiene los datos que acabamos de obtener.

// 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); 

Por supuesto, test.png es el nombre del archivo que se ahorrará. La primera línea es necesaria para eliminar la parte data:image/png;base64, de la imagen codificada, de modo que pueda decodificarse posteriormente por base64_decode(). Su salida ($decodedData) se guardará en el archivo.