通过 AJAX 传递 dataURL答案

【问题标题】：pass a dataURL through AJAX通过 AJAX 传递 dataURL
【发布时间】：2012-03-05 14:46:51
【问题描述】：

我正在尝试将由 HTML5 画布制作的 dataURL 保存到我的 mysql 数据库中。

我有 ajax 设置来提取我创建的名为“dataURL”的变量，并且我正在使用以下代码将 dataURL 设置为画布的 img：

dataURL = oCanvas.toDataURL();

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

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

任何帮助将不胜感激！

【问题讨论】：

【解决方案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[]

您可以将解码结果保存到您的数据库中（稍后检索）

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

Base64 编码需要将近 4 倍的字节数来编码图像。无论您是使用ajax 还是正则形式，建议在传输前使用window.atob 解码base64。当然IE不支持但是this looks like a shim.

【讨论】：