将 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.
我在 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.