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.

score 3 · Accepted Answer · edited May 23 '17 at 12:15

3

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.

edited May 23 '17 at 12:15

Community

1
1

answered Jun 10 '15 at 15:00

Andrey Mikhaylov - lolmaus

23,107
6
84
133

Yeah that's basically what I'm doing now but the DataURL is so large it takes a while to resolve from the server. So now I'm thinking I may need to come up with a different solution to make that process a bit faster – Jordan Jun 10 '15 at 15:12
Dear Jordan, but it's a totally different question! It's neither related to Ember nor to Firebase. Please accept this answer as it resolves the original problem, and start a new question about image compression. – Andrey Mikhaylov - lolmaus Jun 10 '15 at 15:56

Saving an html object to firebase

1 Answers1

Update 1