XMLHTTPREQUEST Post to PHP elimina las firmas más

Question

Estoy publicando un archivo JPEG desde un elemento de lona HTML5 como una cadena a PHP usando:

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

Todo está bien, DataRURL es correcto (en la consola) y contiene un archivo JPEG válido. Pero cuando lo recupero con PHP, ¿todas las firmas más se reemplazan por espacios?

El código 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);

Utilizo el archivo de texto para ver cómo se ven los datos, ya que no puedo molestarme en descubrir cómo hacer eco de regreso a la JS :). El archivo de texto contiene exactamente los mismos datos que los registros de la consola JS, pero sin el +'ES y con espacios, lo que resulta en que los archivos JPEG estén corruptos.

¿Qué tengo que hacer?

Answer 1

No los elimina. + significa "un espacio" en application/x-www-form-urlencoded datos. Por lo tanto, se convierten en espacios cuando el URI se decodifica en el servidor.

Como siempre Para tomar algunos datos y ponerlos en una URL, debe codificar eso:

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

Answer 2

Debe urlencode el dataUrl:

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