2017-04-12 18:36 阅读 152

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

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

          type: "POST",
          url: "imgprocess.php",
          data: { 
             imgBase64: dataURL
        }).done(function(o) {

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:


$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?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • 已采纳
    duande3134 duande3134 2017-04-12 18:43

    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.

    点赞 评论 复制链接分享