AJAX 发送一个东西 PHP 接收另一个东西？

Question

我正在使用 Fabric.js canvas 库，我想将 canvas 保存在服务器上。转换成数据 URL:

var canvasData = canvas.toDataURL();

并使用 Ajax:

将其发送到服务器

let xhr = new XMLHttpRequest();
xhr.open("POST", "php/saveImg.php", true);
xhr.onload = () => {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
let data = xhr.response;
window.open(data);
}}};
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("canvasData=" + canvasData);

解码数据并保存在saveImg.php:

if(isset($_POST['canvasData'])){
$imageData = $_POST['canvasData'];
echo $imageData;

$filteredData = substr($imageData, strpos($imageData, ",") + 1);
$a = file_put_contents( "images/image1.png", base64_decode($filteredData));
}

当我查看 image1.png 时，它是透明的，里面什么也没有（但它的尺寸正确，大小为 40 KB）。

当我检查 $_POST 中接收到的值时，我可以看到数据的值发生了变形：一些 + 字符已被删除，一些其他字符已被添加。

Answer 1

您的 POST 数据编码不正确，您可以使用 encodeURIComponent 来做到这一点

xhr.send("canvasData=" + encodeURIComponent(canvasData));

AJAX 发送一个东西 PHP 接收另一个东西？

AJAX send a thing and PHP receive another thing?

javascript

php

ajax

xmlhttprequest

html5-canvas