javascript - HTML5 Canvas 不会呈现从 canvas.toDataURI() 接收到的数据

Question

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

然后我有一个不同的页面，它有一个 img 元素来从数据库请求数据并呈现它。但它……不会。数据打通了，我可以用浏览器的查看源码功能看到：

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

（已添加省略号）

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

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

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

这是我的接收端代码：

对于发送端：

score 2 · Accepted Answer

如果我完全理解您的问题 - 您是说接收器不工作（即反映输出的东西）。

您需要对数据进行编码：

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

这适用于空白画布，因为它由没有任何符号的字母组成。只要你一画，canvas base64 值就有如+在其中的字符，这在POST语言中是空间的意思。因此，如果您的值是您encodeURIComponent的值，这些符号将完整地发送到您的服务器，并且接收器应该能够正确呈现输出。

1 回答 1