Base64图像解码问题 - 空.png文件？

Question

I'm trying to get a .png image from <canvas> element generated basing on html code.

The javascript i'm using is:

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'); 
        });
  }
});
}

I have html2canvas library linked, it creates good <canvas> (can see them since I used appendChild), and now I'd like to convert those <canvas> into photo.png file, to be able to either save it on server, or INSERT INTO as blob to my `database table.

var dataURL = canvas.toDataURL();

to this point it seems everything is working fine (I can manage to get this url, which appears to be hella long). Because of strange look i'm pretty much sure i'd need to use base64 decoding to retrieve it as image file.

My imgprocess.php looks like that:

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

?>

It does output photo.png file, but the file is empty and as I'm not very experienced I've been struggling to find cause of this issue.

Maybe you guys could help me deal with this problem?

Answer 1

It should be $img = $_POST['imgBase64']; not $img = $_POST['data']; as your data object's key name is imgBase64 when sending the ajax post request.