Question

我有一个HTML5 Canvas。我.toDataURI它并使用AJAX将其发送给PHP。 PHP将其存储在数据库中。

然后我有一个不同的页面，它有一个img元素来请求数据库中的数据并呈现它。但它......不会。数据通过，我可以通过浏览器的视图源函数看到它：

<img id="embedded" src="data:image/png;base64,iVBORw...5CYII=" />

（省略号补充）

它没有被截断或类似的任何愚蠢，我在每个脚本中都有document.write和echo，从画布生成数据到嵌入最终元素的位置，它完全完整。

我尝试过使用其他来源生成的图片URI，没有问题。我在Chrome 12和Firefox 5中对此进行了测试，两者的行为相同。

最后一个奇怪的是，当画布完全空白时，它会生成它生成的图像数据：我得到一个与原始画布尺寸相同的空白图像。但是只要我画上任何东西，什么都没有。只是熟悉的小错误加载图像图标。

这是接收端的代码：

对于发送端：

Answer 1

如果我完全理解你的问题 - 你说接收器不工作（即镜像输出的东西）。

您需要对数据进行编码：

function postToServer(data) {
  data = "data=" + encodeURIComponent(data);
  // continue with XHR POST

这适用于空白画布，因为它由没有任何符号的字母组成。绘制后，canvas base64值中包含+等字符，POST语言中的字符表示空格。因此，如果你encodeURIComponent你的价值，这些符号将完整地发送到你的服务器，接收器应该能够正确地呈现输出。