Php JavaScript画布API生成的图像不是'；保存时不可见？

完整的代码也可以在这里找到：（jsfiddle上的部分版本显然不能让php与jsfiddle一起运行）

我最初编写了一些代码，将canvas元素保存为图像（请参见此处的工作代码：），之后我对其进行了更新，使其能够处理多个canvas元素，但现在的主要区别是图像数据通过jQuery ajax方法传递给我的PHP脚本，而不是通过隐藏的表单字段

问题是图像似乎是空白的。它们生成时每个大约200kb，因此它们显然有一些内容，但是当您预览图像时，什么也看不到，当我尝试在Adobe Fireworks或其他照片应用程序中打开图像时，我无法打开该文件

图像数据似乎很好地通过服务器传输，但我真的不确定为什么现在我使用

base64\u decode

写入图像时，这意味着生成的图像将不再可见？我能想到的唯一一件事是，可能通过ajax发布数据并没有发送所有数据，因此它生成了一个图像，但它不是完整的内容，因此图像是不完整的（因此照片应用程序无法打开它）

---

在Firebug中检查post数据时，是否表明已达到限制？不确定这是否是问题所在？

如果您没有跨源安全错误（您的Fiddle会遇到这种情况，但只要图像位于同一服务器上，它们就可以了），并且您正在获取一些数据，因此您的PHP可能会出现问题。在PHP中，您必须将空格替换为+，以解码使用Javascript编码的base64

 $data = str_replace(" ", "+", $_POST['imgdata']);
 file_put_contents("generated.png", base64_decode($data));

---

问题实际上是通过XHR发送数据。最初我使用jQuery-ajax方法，然后我将其替换为自己的ajax抽象，但问题仍然存在，直到有人在twitter上建议我使用

FormData

将数据传递给服务器端PHP。样本如下。。。（完整代码可在此处查看：）

---

```

您能在代码中提供使用jQuery ajax的更新示例吗？1）我很惊讶它能工作，因为存在跨源问题2）您似乎没有对数据URI进行编码，请在将数据传递给jQuery的ajax方法之前尝试

encodeURIComponent（newCanvas.toDataURL（））

。

// Can't use standard library AJAX methods (such as…)
// data: "imgdata=" + newCanvas.toDataURL()
// Not sure why it doesn't work as we're only abstracting an API over the top of the native XHR object?
// To make this work we need to use a proper FormData object (no data on browser support)
var formData = new FormData();
formData.append("imgdata", newCanvas.toDataURL());

var xhr = new XMLHttpRequest();
xhr.open("POST", "saveimage.php");
xhr.send(formData);

// Watch for when the state of the document gets updated
xhr.onreadystatechange = function(){
    // Wait until the data is fully loaded, and make sure that the request hasn't already timed out
    if (xhr.readyState == 4) {
        // Check to see if the request was successful
        if (checkHTTPSuccess(xhr)) {
            // Execute the success callback
            onSuccessfulImageProcessing(card, newCanvas, ctx, getHTTPData(xhr));
        }
        else {
            throw new Error("checkHTTPSuccess failed = " + e);
        }

        xhr.onreadystatechange = null;
        xhr = null;
    }
};