XMLHttpRequestのPOSTは、私が使用してPHPの文字列としてHTML5のcanvas要素からJPEGファイルを掲載していPLUS-兆候

Question

削除：

function createJPG() { 
    var dataUrl = document.getElementById('canvas').childNodes[4].toDataURL("image/jpeg"); 
    console.log(dataUrl); 
    var params = "theimage=" + dataUrl; 
    var http = new XMLHttpRequest(); 
    http.open("POST", "/avatar/php/save-avatar.php", true); 
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    http.send(params); 
} 

すべては結構です、dataUrlは（コンソールで）正しいです有効なJPEGファイルが含まれています。しかし、PHPで検索すると、プラス記号はすべてスペースで置き換えられますか？

PHPコード：

$name = "image.jpg"; 
$data=$_POST['theimage']; 

file_put_contents($name, base64_decode(substr($data, strpos($data, ",")+1))); 
file_put_contents("../images/avatars/uploads/generated" . rand(0,200) . ".txt", $data); 

私はデータは、私はJS :)にエコーバックする方法を見つけ出すためにわざわざすることはできませんので、どのように見えるかを確認するために、テキストファイルを使用します。テキストファイルにはJSコンソールログとまったく同じデータが含まれていますが、代わりにスペースとスペースは含まれていないため、JPEGファイルが破損します。

どうすればよいですか？

Answer 1

それはそれらを削除しません。 +は、application/x-www-form-urlencodedデータに「a space」を意味します。したがって、URIがサーバー上でデコードされると、それらはスペースに変換されます。

は、いくつかのデータを取得し、URLにそれを置くために、常にとして、あなたはそれをencodeする必要があります。

var params = "theimage=" + encodeURIComponent(dataUrl); 

Answer 2

あなたはdataUrlをURLENCODE必要があります。

var params = "theimage=" + urlencode(dataUrl);