Geek asks and answers

Thumbnails in fabricjs are pixelated

When I upload an image like the one I included to say 400 dpi, it becomes very pixelated. I looked around and nothing worked. I have a collection of images that the user could apply to the canvas, and the images will change depending on the scale, so I can not re-size them ahead of time.

Any help would be greatly appreciated.

Thanks jody

http://rockofagescanada.com/test33_6287.png

+3
source share
2 answers

Starting with version 1.4.13 FabricJs supports image resizing filters.

There are two ways to use the resize filter:

- Static resizing under load with fixed scale

- o .

4 :

-SliceHack, , , , .

-Hermite filter

-

-Lanczos lobes

:

  • ,

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

1500, rezise . . .

var scale = 1500 / oImg.getWidth();

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

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

More articles:


All Articles