Fabric js图像优化

【问题标题】：Fabric js image optimizeFabric js图像优化
【发布时间】：2016-11-21 03:51:01
【问题描述】：

我正在使用fabric js并使用上传图片选项，但是这里人们上传的图片尺寸很大（2mb等），所以有没有办法压缩它，

我将整个画布以 JSON 格式保存在数据库中，然后检索，但由于图像大小，画布的大小也会增加

这是小提琴

`http://jsfiddle.net/jaibuu/Vp6wa/`

【问题讨论】：

标签： compression fabricjs

【解决方案1】：

在您的 js fiddle 代码中，您应该传递图像的路径引用。

 var image = new fabric.Image(imgObj);
        image.set({
            left: 250,
            top: 250,
            angle: 20,
            padding: 10,
            cornersize: 10
        });

不是将序列化的图像保存到画布，而是将路径引用存储在jsonObj中。

 var image = new fabric.Image(imgObj);
        image.set({
            left: 250,
            top: 250,
            angle: 20,
            padding: 10,
            cornersize: 10,
            sourcePath: url
        });

【讨论】：

【解决方案2】：

您正在将画布转换为 json 格式，并且没有可用于 json 优化的选项。但是如果你使用canvas.toDataURL 方法，这个方法有一个quality 选项，如果你想减小转换图像的大小，你设置quality 为0.0它将生成低质量和小尺寸的图像。

var dataURL = canvas.toDataURL({
  format: 'jpeg',
  quality: 0.8
});

注意：请记住，如果您使用质量选项，格式必须是 jpeg。

【讨论】：