Question

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

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

问题是图像显示为空白。它们在生成时大约为200kb，因此它们显然有一些内容，但是当您预览图像时没有显示任何内容，当我尝试在Adobe 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;
    }
};

```

Answer 2

如果你没有Cross Origin SECURITY_ERR（你的小提琴会受到影响，但只要你的图像在同一台服务器上它们就可以了），你得到一些数据，这样你就可能遇到了PHP的问题。从PHP user notes，你必须用+'替换空格来解码用Javascript编码的base64。

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

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

2 个答案: