Base64画像のデコードの問題 - 空の.pngファイルですか？

Question

私は.pngイメージをコードに基づいて生成された<canvas>要素から取得しようとしています。

私が使用しているjavascriptがある：私はhtml2canvasライブラリがリンクされ

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

持って、それは（私がappendChildを使用するので、それらを見ることができます）<canvas>良い作成し、今私はにそれら<canvas>を変換したいですphoto.pngファイルをサーバに保存するか、INSERT INTOをblobとしてデータベーステーブルに保存します。

var dataURL = canvas.toDataURL(); 

は、この点にはすべてが（私は長いヘラのように見えるこのurl、取得するために管理することができます）正常に動作しているようです。奇妙な外観のため、私はbase64 decodingをimageというファイルとして取得する必要があると確信しています。

私imgprocess.phpは以下のようになります。

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

?> 

それは出力photo.pngファイルを行いますが、ファイルはemptyであり、私は非常に経験していないよと私は、この問題の原因を見つけるのに苦労してきました。

あなたはこの問題に対処する手助けをすることができますか？

Answer 1

データオブジェクトのキー名がimgBase64であるため、$img = $_POST['imgBase64'];ではなく、$img = $_POST['data'];である必要があります。