使用文件输入和 FileReader 将图像加载到结构 Canvas 上。我们使用scaleToWidth和scaleToHeight让大照片适合 Canvas 。
当我使用选择一个大的 3.2MB jpeg 时,图像会很好地调整为 1MB,这正是我们想要的。然后我们准备数据以存储在本地索引数据库上;
canvas.toJSON(); // 4.2MB
canvas.toDataURL(); // 1MB
看来toJSON方法存储的是原始的jpeg。我们可以在序列化之前减少 jpeg 吗?
我更愿意序列化为 JSON,以便我们将来可以使用其他优秀的 Fabric 功能。
最佳答案
我们已经计算出这个;
- 将照片加载到 Fabric.js Canvas
- 然后将其导出(这会将图像缩小到 Canvas 尺寸)并
- 将缩小的图像数据重新加载回 Canvas 上,并
- 删除原始全尺寸照片。
现在,fabric.js Canvas 数据已大大减少,以便存储在本地 indexeddb 中;
// camera image // 3.2 MB
canvas.toJSON(); // 1 MB
canvas.toDataURL(); // 1 MB
JavaScript
var reader = new FileReader();
reader.onload = function (event) {
var img = new Image();
var opts = {};
img.onload = function () {
var imgInstance = new fabric.Image(img, opts);
if (imgInstance.getWidth() > canvas.getWidth()) {
imgInstance.scaleToWidth(canvas.getWidth());
}
if (imgInstance.getHeight() > canvas.getHeight()) {
imgInstance.scaleToHeight(canvas.getHeight());
}
canvas.add(imgInstance);
canvas.renderAll();
img = null;
/* now that the image is loaded reduce it's size
so the original large image is not stored */
/* assumes photo is object 0, need to code a function to
find the index otherwise */
var photoObjectIx = 0;
var originalPhotoObject = canvas.getObjects()[photoObjectIx];
var nimg = new Image();
nimg.onload = function () {
var imgInstance = new fabric.Image(nimg, { selectable: false });
canvas.remove(originalPhotoObject);
canvas.add(imgInstance);
canvas.renderAll();
nimg = null;
};
nimg.src = originalPhotoObject.toDataURL();
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
关于javascript - 调整图像大小后,减少由fabric.js序列化的JSON的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28199688/