JavaScript Canvas API 生成的图像在保存时不可见？答案

【问题标题】：Images generated by JavaScript Canvas API aren't viewable when saved?JavaScript Canvas API 生成的图像在保存时不可见？
【发布时间】：2012-03-22 08:19:59
【问题描述】：

完整代码也可以在这里找到：https://gist.github.com/1973726（jsfiddle 上的部分版本http://jsfiddle.net/VaEAJ/ 显然不能用 jsfiddle 运行 php）

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

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

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

在 Firebug 中检查帖子数据时，提示已达到限制？不知道是不是这个问题？

【问题讨论】：

能否提供在您的代码中使用 jQuery ajax 的更新示例？
1) 由于跨域问题，我很惊讶它完全可以工作 2) 您似乎没有对 DATA URI 进行编码，在将数据传递给 jQuery 的 ajax 之前尝试encodeURIComponent(newCanvas.toDataURL())方法。

标签： php javascript canvas html5-canvas

【解决方案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;
    }
};

```

【讨论】：

【解决方案2】：

如果您没有 Cross Origin SECURITY_ERR（您的 Fiddle 会遇到这种情况，但只要您的图像在同一台服务器上就可以了），并且您正在获取一些数据，那么您的 PHP 可能有问题.在 PHP user notes 中，您必须用 + 替换空格才能解码使用 Javascript 编码的 base64。

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

【讨论】：