XMLHttpRequest POST per PHP rimuove più-segni

Question

sto postando un file JPEG da un elemento HTML5 canvas come una stringa di PHP utilizzando:

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

Tutto va bene, il DataURL è corretto (nella console) e contiene un file JPEG valido. Ma quando a recuperare con PHP, tutti i più-segni sono sostituiti da spazi?

Il PHP-codice:

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

Io uso il file di testo per vedere che cosa gli sguardi di dati come dato che non posso preoccuparsi di capire come eco di nuovo alla JS :). Il file di testo contiene gli stessi dati esatti come i log della console JS, ma senza i 'Es + e con spazi invece, che i risultati nel formato JPEG file che vengono corrotti.

Che cosa devo fare?

Answer 1

Non rimuoverli. mezzi + "uno spazio" nei dati application/x-www-form-urlencoded. In modo da ottenere convertiti in spazi quando l'URI viene decodificato sul server.

sempre per l'adozione di alcuni dati e di metterlo in un URL, è necessario codificare esso:

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

Answer 2

Si dovrebbe UrlEncode il DataURL:

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