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

You have to serialize and deserialize the image:

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;
}

Based on this answer.

Update 1

The canvas.toDataURL() method is able to compress the data into JPEG with compression. Using even 95% quality will drastically decrease filesize for photos, compared to PNG.

Use this:

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

Based on this answer.