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

【问题标题】：Downsized images in fabricjs are pixelatedfabricjs中缩小的图像是像素化的
【发布时间】：2014-03-05 03:24:42
【问题描述】：

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

任何帮助将不胜感激。

谢谢乔迪

http://rockofagescanada.com/test33_6287.png

【问题讨论】：

标签： image resize fabricjs

【解决方案1】：

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

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

-在加载时以固定比例静态调整大小

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

目前已实现 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);

【讨论】：

请注意，在 Fabric 2 中，您可以像这样设置调整大小过滤器：image.resizeFilter = new fabric.Image.filters.ResizeFilter({type: 'hermite'}); See fabricjs.com/v2-breaking-changes

【解决方案2】：

如果您想将宽度设置为 1500，则可以使用以下代码进行调整。它对我有用。图片看起来很正常。

var scale = 1500 / oImg.getWidth();

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

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

【讨论】：

答案没有解决 OP 的实际问题。