Question

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

非常感谢任何帮助。

由于乔迪

http://rockofagescanada.com/test33_6287.png

Answer 1

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

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

-Static按比例调整负载

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

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

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

-Hermite过滤器

- 双线性过滤

-Lanczos使用lobes参数调整大小

以下是一些例子：

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

使用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，则可以使用以下代码进行重新设置。它对我有用。图像看起来很正常。

var scale = 1500 / oImg.getWidth();

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

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

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

2 个答案: