image - fabricjs 中缩小的图像像素化

Question

当我加载一张像我包含的图像那样高 400 dpi 时，它变得非常像素化。我环顾四周，似乎没有任何效果。我有一组用户可以放在 Canvas 上的图像，这些图像根据比例重新调整大小，因此我无法提前调整它们的大小。

任何帮助将不胜感激。

谢谢
乔迪

http://rockofagescanada.com/test33_6287.png

Answer 1

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

调整大小过滤器可以通过两种方式使用:

-Static resize on load with fixed scale

-Dynamic resize on scaling the image object by code o by mouse drags.

目前已经实现了 4 个过滤器:

-SliceHack , not really a filter but an hack to get smoother resize by resizing 0.5 the image multiple times.

-Hermite filter

-Bilinear filtering

-Lanczos resizing with lobes parameter

下面是一些例子:

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