将 html 对象保存到 firebase答案

【问题标题】：Saving an html object to firebase将 html 对象保存到 firebase
【发布时间】：2015-06-11 00:00:56
【问题描述】：

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

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

如何将画布对象保存到 Firebase 以供以后用作实际画布。

【问题讨论】：

标签： javascript canvas ember.js firebase emberfire

【解决方案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。

【讨论】：

是的，这基本上就是我现在正在做的事情，但是 DataURL 太大了，需要一段时间才能从服务器解析。所以现在我想我可能需要想出一个不同的解决方案来加快这个过程
亲爱的乔丹，但这是一个完全不同的问题！它既与 Ember 也与 Firebase 无关。请接受这个答案，因为它解决了原来的问题，并开始一个关于图像压缩的新问题。