将画布数据导出为 json

Question

伙计们，我已经使用 canvas 标签制作了一个简单的绘图应用程序。但是我想将数据导出到 JSON 以便保存。

这是怎么做的？

Answer 1

您需要的是toDataUrl(type) 方法。它将返回一个数据： URI – 一个纯字符串，您可以轻松地将其放入 JSON 结构中或执行您想要的操作。示例：

var canvas = document.createElement('canvas');
canvas.width=8;
canvas.height=8;
var ctx = canvas.getContext('2d');
/* draw on ctx */
alert(canvas.toDataURL());
/* result: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAADUlEQVR42mNgGAUgAAABCAABXbcZDQAAAABJRU5ErkJggg== */

在 Opera 10.0 中测试。你也可以试试 .toDataURL("image/jpeg")