CODEWITHSUNDEEP
imageresizefabricjs
user3229559
user3229559

Reputation: 43

Downsized images in fabricjs are pixelated

When I load an image like the one I've included to say 400 dpi high it becomes very pixelated. I've looked around and nothing seems to work. I have a collection of images that a user could put on the canvas and the images are re-sized depending on a scale so I can't re-size them ahead of time.

Any help would be greatly appreciated.

Thanks Jody

http://rockofagescanada.com/test33_6287.png

Upvotes: 4

Views: 3773

Answers (2)

bgth
bgth

Reputation: 460

If you want to set the width to 1500, then below code can be used for rezise. It worked for me. Image looks normal.

var scale = 1500 / oImg.getWidth();

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

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

Upvotes: -1

AndreaBogazzi
AndreaBogazzi

Reputation: 14731

As of version 1.4.13 FabricJs support image resize filters.

The resize filter can be used in 2 ways:

-Static resize on load with fixed scale

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

There are 4 filters implemented as of now:

-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

Here follow some examples:

  1. Static resize at load with Hermite filter, fixed scale

    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. Dynamic resize with Lanczos filter, 2 lobes

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

Upvotes: 7

Related Questions