javascript - 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，我可以看到数据的值发生了变形：一些+字符已被删除，而其他一些字符已被添加。

标签： javascriptphpajaxxmlhttprequesthtml5-canvas

Answer 1

您的 POST 数据未正确编码，您可以使用它encodeURIComponent来执行此操作

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