XMLHttpRequest POST для PHP удаляет плюсики

Question

Я публикую файл JPEG из элемента HTML5 canvas в виде строки в PHP, используя:

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.Таким образом, они преобразуются в пробелы, когда URI декодируется на сервере.

Поскольку всегда для получения некоторых данных и помещения их в URL, необходимо кодировать это:

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

Answer 2

Вы должны urlencode dataUrl:

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