php - JavaScript Canvas API 生成的图像在保存时无法查看？

Question

完整代码也可以在这里找到:https://gist.github.com/1973726 (jsfiddle 上的部分版本 http://jsfiddle.net/VaEAJ/ 显然不能让 php 与 jsfiddle 一起运行)

我最初写了一些代码，它采用 Canvas 元素并将其保存为图像(请参阅此处的工作代码:https://gist.github.com/1973283)，然后我对其进行了更新，以便它可以处理多个 Canvas 元素，但现在的主要区别在于图像数据通过 jQuery ajax 方法而不是通过隐藏的表单字段传递到我的 PHP 脚本。

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

图像数据似乎可以正常传输到服务器，但我真的不确定为什么现在当我使用 base64_decode 编写图像时，这意味着生成的图像将不再可见？我唯一能想到的是，也许通过 ajax 发布数据并没有发送所有数据，所以它生成了一个图像，但它不是完整的内容，所以图像不完整(因此照片应用程序不能'不要打开它)。

在 Firebug 中检查帖子数据时提示已达到限制？不确定这是否是问题所在？

Answer 1

问题实际上是通过 XHR 发送数据。我最初使用的是 jQuery ajax 方法，然后我将其换成我自己的 ajax 抽象，但问题仍然存在，直到 Twitter 上有人建议我使用 FormData 将数据传递到服务器端 PHP。示例如下……(完整代码可见:https://gist.github.com/1973726)

// 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;
    }
};

```