サーバー上のキャンバスにphpキャンバス

Question

私のキャンバスからクライアント上の画像データを取得し、私のサーバー上に.pngとして保存したいと思います。

これは、キャンバスから画像データを取得し、saveImage.phpに送信し、私のクライアントのコードです：

function render() 
    { 

     var imageData = ctx.canvas.toDataURL("image/png"); 
     var postData = "imageData="+imageData; 

     var ajax = new XMLHttpRequest(); 
     ajax.open("POST","saveImage.php",true); 
     ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
     ajax.onreadystatechange=function() 
     { 
      console.log(ajax.responseText); 
     } 

     ajax.send(postData); 
    } 

そして、これがsaveImage.phpは、次のようになります。

<?php 
    if(isset($_POST["imageData"])) 
    { 
     $imageEncoded = $_POST["imageData"]; 

     $imageDataExploded = explode(',', $imageEncoded); 

     $imageDecoded = base64_decode($imageDataExploded[1]); 

     $filename = time()."image".mt_rand(); 

     $file = fopen("./".$filename.".png","wb"); 
     fwrite($file, $imageDecoded); 
     fclose($file); 
     echo $filename; 
     exit(); 
    } 
?> 

コードは実際に正常に動作しますが、私の問題は、作成されるイメージが何らかの方法で問題があるということだけです。 開こうとすると、Windowsではフォーマットをサポートしていないためイメージが表示されません。それは.pngですか？

私はここで間違っていますか？

Answer 1

あなたはPOSTデータに含める前 encodeURIComponent()を使用してデータを符号化する必要があります

。

jQueryのようなフレームワークを使用して、ブラウザの違いを考慮する必要があります。私は、すべてのブラウザで同じコードが動作しないことを保証します。

PHPでは、データを書き込むためにfile_put_contents()を調べてみてください。タイプするのがずっと早い！

Answer 2

HTTP経由で実際に何が送信されているか確認しましたか？ $ imageEncodedは、おそらくデータで始まる：画像/ PNG; base64では、

xxxxxに base64の後のコンマまで

ストリップのすべて：

https://stackoverflow.com/a/15153931/3766670