javascript - Saving an html object to firebase

Question

I'm working in ember.js my project has an image cropping mechanic. This returns to me by default a canvas object and some data necessary to redraw the cropped image.

But when I try to save the canvas object to firebase it saves it as something like [htmlObject Canvas] or something like that, so when I try to get the record and display the canvas it displays that instead of the actual canvas object.

How can I save a canvas object to firebase to use later as an actual 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;
}

基于这个答案。

更新 1

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

用这个：

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

基于这个答案。