fabricjs中的缩小图像是像素化的

Question

当我加载一个像我所包含的图像说400 dpi高的图像时,它变得非常像素化.我环顾四周似乎没什么用.我有一组用户可以放在画布上的图像,图像根据比例重新调整大小,所以我不能提前调整大小.

任何帮助将不胜感激.

谢谢Jody

http://rockofagescanada.com/test33_6287.png

Answer 1

从版本1.4.13开始,FabricJs支持图像大小调整过滤器.

调整大小过滤器有两种使用方式:

-Static按负载调整大小

- 通过鼠标拖动按代码缩放图像对象时动态调整大小.

截至目前已实施4个过滤器:

-SliceHack,不是真正的过滤器,而是通过多次调整0.5图像来获得更平滑的调整大小.

-Hermite过滤器

- 双线性过滤

-Lanczos用lobes参数调整大小

以下是一些例子:

1. 使用Hermite过滤器静态调整负载大小,固定比例

   var theImage = new fabric.Image(imag, {
       top: 0,
       left: 0
   });
   theImage.filters.push(
                  new fabric.Image.filters.Resize({
                           resizeType: 'hermite',
                           scaleX: 0.1,
                           scaleY: 0.1
                          })
                        );
   theImage.applyFilters();
   canvas.add(theImage);
   

2. 动态调整大小Lanczos过滤器,2个凸起

   var theImage = new fabric.Image(imag, {
       top: 0,
       left: 0
   });
   theImage.resizeFilters.push(new fabric.Image.filters.Resize({
       resizeType: 'lanczos', // typo fixed
       lanczosLobes: 2 // typo fixed
   }));
   canvas.add(theImage);