Estoy tratando de obtener una imagen .png del elemento <canvas> generado en base al código html .

El javascript que estoy usando es:

 function canvityo() { html2canvas(document.body, { onrendered: function(canvas) { document.body.appendChild( canvas ); var dataURL = canvas.toDataURL(); $.ajax({ type: "POST", url: "imgprocess.php", data: { imgBase64: dataURL } }).done(function(o) { console.log('saved'); }); } }); }

Tengo la biblioteca html2canvas vinculada, crea buenos <canvas> (puedo verlos ya que usé appendChild ), y ahora me gustaría convertir esos <canvas> en un archivo photo.png , para poder guardarlo en el servidor, o INSERT INTO como blob en mi `tabla de base de datos.

 var dataURL = canvas.toDataURL();

hasta este punto, parece que todo funciona bien (puedo obtener esta url , que parece ser muy larga). Debido a la apariencia extraña, estoy bastante seguro de que necesitaría usar la base64 decoding para recuperarlo como un archivo de image .

Mi imgprocess.php se ve así:

 <?php $img = $_POST['data']; $img = str_replace('data:image/png;base64,', '', $img); $img = str_replace(' ', '+', $img); $fileData = base64_decode($img); $fileName = 'photo.png'; file_put_contents($fileName, $fileData); ?>

Muestra el archivo photo.png , pero el archivo está empty y, como no tengo mucha experiencia, he estado luchando para encontrar la causa de este problema.

¿Tal vez ustedes podrían ayudarme a lidiar con este problema?