通过AJAX传递dataURL

Question

我正在尝试将从HTML5画布制作的dataURL保存到我的mysql db。

我有一个ajax设置来拉取我所做的名为“dataURL”的var并且我使用以下代码将dataURL设置为画布的img：

dataURL = oCanvas.toDataURL();

我的问题是画布的dataURL有很多字符在拉动ajax时效果不好所以我需要一种方法对它进行编码或以不同的方式操作它，这样我的最终结果就可以保存到mysql db然后“解码“再次显示。

我知道我的AJAX有效，因为如果我将var dataURL设置为类似“cheese”的东西，它会在数据库中保存为cheese。

非常感谢任何帮助！

Answer 1

您从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 2

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

Answer 3

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