将 html 对象保存到 firebase

Saving an html object to firebase

我在 ember.js 工作,我的项目有图像裁剪机制。这个 returns 对我来说默认是一个 canvas 对象和一些重新绘制裁剪图像所需的数据。

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

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

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

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.