fabricjs中缩小尺寸的图像pixelated

Question

当我加载一个图像，像我已经包含的图像说400 dpi高，它变得非常像素化。我环顾四周，似乎没有任何工作。我有一个用户可以放在画布上的图像集合，并且根据比例尺重新调整图像大小，因此我无法提前调整大小。

任何帮助将不胜感激。

感谢 乔迪

http://rockofagescanada.com/test33_6287.png

Answer 1

截至版本1.4.13 FabricJs支持图片缩放过滤器。

调整大小过滤器可以在2种方式使用：

表示静态负载调整与固定尺

- 动态上缩放由代码图像对象o通过鼠标拖动调整大小。

有4个过滤器，截至目前实现的：

-SliceHack，不是一个真正的过滤器，但一个黑客通过调整0.5图像多次以获得更流畅的大小调整。

-Hermite滤波器

-Bilinear滤波

-Lanczos与裂片参数调整

这里遵循一些例子：

1. 静态调整在负载厄米滤波器，固定比例尺

   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); 
   

Answer 2

如果要设置宽度为1500，然后在下面的代码可以用于rezise。它为我工作。图像看起来正常。

var scale = 1500/oImg.getWidth(); 

var newWidth = oImg.getWidth() * scale; 
var newHeight = oImg.getHeight() * scale; 

oImg.set({width : newWidth, height : newHeight});