通过AJAX传递dataURL

Question

我正在尝试将从HTML5画布生成的dataURL保存到我的mysql数据库中。

我使用ajax设置来提取我创建的名为" dataURL“的var，并使用以下代码将dataURL设置为画布的img：

dataURL = oCanvas.toDataURL();

我的问题是画布的dataURL有很多字符不能很好地用于ajax，所以我需要一种方法来编码它或以不同的方式操作它，这样我的最终结果就可以保存到mysql数据库中，然后再“解码”再次显示。

我知道我的AJAX可以工作，因为如果我将var dataURL设置为类似于“奶酪”的值，它会在数据库中保存为奶酪。

任何帮助都将不胜感激！

Answer 1

实际上，我最终设置了一个事件，这样当图像绘制完成时，它会将dataURL设置为隐藏的表单元素。不再需要通过ajax :)传递它。不过，还是要谢谢你的建议。

Answer 2

您从toDataUrl收到的数据格式如下：

 data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD.... (very long string)

首先将接收到的数据过滤为data:image/png;base64,后的部分

然后使用您的语言提供的任何Base64库将其解码为字节数组(或blob)。如果您使用的是Java：Apache Commons Codec

下面是groovy中的一个示例：

def bytes = new Base64().decode(filteredData) as byte[]

您可以将解码结果保存到数据库中(稍后检索)

Answer 3

Base64编码几乎需要4倍的字节来对图像进行编码。无论您是使用ajax还是常规表单，建议在传输base64之前使用window.atob进行解码。IE当然不支持它，但是this looks like a shim。