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

Question

我正在使用 Fabric.js 画布库，我想将画布保存在服务器上。 将其转换为数据 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));