javascript - 将 html 对象保存到 firebase

Question

我在 ember.js 工作，我的项目有一个图像裁剪机制。默认情况下，这会返回给我一个 Canvas 对象和一些重新绘制裁剪图像所需的数据。

但是当我尝试将 Canvas 对象保存到 firebase 时，它​​会将其保存为类似 [htmlObject Canvas] 或类似的东西，因此当我尝试获取记录并显示它显示的 Canvas 时而不是实际的 Canvas 对象。

如何将 Canvas 对象保存到 firebase 以供以后用作实际 Canvas 。

Answer 1

你必须序列化和反序列化图像:

function serialize(canvas) {
    return canvas.toDataURL();
}

function deserialize(data, canvas) {
    var img = new Image();
    img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        canvas.getContext("2d").drawImage(img, 0, 0);
    };

    img.src = data;
}

基于 this answer .

更新1

canvas.toDataURL() 方法可以将数据压缩成JPEG 压缩格式。与 PNG 相比，即使使用 95% 的质量也会大大减小照片的文件大小。

使用这个:

canvas.toDataURL({
   format: 'jpeg',
   quality: 0.9
});

基于 this answer .