Question

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

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

这是小提琴

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

Answer 1

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

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

与其将序列化的图像保存到canvas上，不如将路径引用存储在jsonObj中。

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

Answer 2

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

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

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

Fabric js图像优化

2 个答案: