Fabricjs resize loses resolution

Question

I have a website and there is one part of it where the person can upload an image and resize this image. To change the size of the image is used the Fabricjs (http://fabricjs.com/).

The problem is when the image is resized it loses resolution, it appears very ugly after changing size. Here is the code used to accomplish that:

function addImage(imgSrc, img_name, colorArr)
{
    console.log("add image call")
    var splitArr = colorArr.split(",");

    show_image();
    jQuery("#img_name").html(img_name);

   fabric.Image.fromURL(imgSrc, function (img) {
             var theScaleFactor=getScaleFactor(img.width,img.height,parseInt(jQuery(".canvas-container").css("width")),parseInt(jQuery(".canvas-container").css("height")));                               
            img.set({
                left : 0,
                top : 0,
                id:'redux',
                orig_name:img_name,
                imgColor:colorArr
            }).scale(theScaleFactor.scale).setCoords(); //HERE THE IMAGE IS DECREASED/RESIZED
            canvas.add(img);

            //console.log("wt = "+img.get('width')+" ht = "+img.get('height')+" scale = "+theScaleFactor.scale)
            img.set({left:((canvas.getWidth()/2) - (parseInt(img.get('width'))*theScaleFactor.scale)/2), top:(45-(parseInt(img.get('height')*theScaleFactor.scale)/2))});

            canvas.setActiveObject(img);
            canvas.renderAll();
            countColors();

    });
    jQuery("#dropbox").hide();
    jQuery(".preloader").hide();

}

I found this link and tried to reduce the image's size gradually, but it didn't work. I tried this way:

img.set({
    left : 0,
    top : 0,
    id:'redux',
    orig_name:img_name,
    imgColor:colorArr
});

img.scale(0.5);
img.scale(0.5);
img.scale(0.5);
img.scale(0.5);
img.scale(0.5);
img.scale(0.5);
img.scale(0.5);
img.scale(0.5);
img.setCoords();
canvas.add(img);

I found this link too and tried to reduce image's size like below, but it didn't work as well:

 img.set({
    left : 0,
    top : 0,
    id:'redux',
    orig_name:img_name,
    imgColor:colorArr
    });

    img.filters.push(new fabric.Image.filters.Resize({scaleX: 0.2, scaleY: 0.2}));                        
    img.applyFilters(canvas.renderAll.bind(canvas)).setCoords();
    canvas.add(img);

I hope someone can help. I appreciate any help.

===============================

UPDATE with answer:

This way it worked:

fabric.Image.fromURL(imgSrc, function (img) {
    var theScaleFactor = getScaleFactor(img.width,img.height,parseInt(jQuery(".canvas-container").css("width")),parseInt(jQuery(".canvas-container").css("height")));
    img.set({
        left : 0,
        top : 0,
        id:'redux',
        orig_name:img_name,
        imgColor:colorArr
    });//.scale(theScaleFactor.scale).setCoords();

    img.filters.push( new fabric.Image.filters.Resize( { resizeType: 'sliceHack', scaleX: theScaleFactor.scale, scaleY: theScaleFactor.scale } ) );
    img.applyFilters();
    img.setCoords();

    canvas.add(img);

    //console.log("wt = "+img.get('width')+" ht = "+img.get('height')+" scale = "+theScaleFactor.scale)
    img.set({left:((canvas.getWidth()/2) - (parseInt(img.get('width'))*theScaleFactor.scale)/2), top:(45-(parseInt(img.get('height')*theScaleFactor.scale)/2))});

    canvas.setActiveObject(img);
    canvas.renderAll();
    countColors();
});

jQuery("#dropbox").hide();
jQuery(".preloader").hide();
}

As a heads up, in Fabric 2, you set the resize filter like so: `image.resizeFilter = new fabric.Image.filters.ResizeFilter({type: 'sliceHack'});` See http://fabricjs.com/v2-breaking-changes — Collin Krawll, Mar 16 '18 at 00:23

score 2 · Accepted Answer · edited Jan 09 '17 at 22:29

2

The image does not lose resolution, the ugly effect you notice is from the "nearest neighbour" resize algorithm that the canvas uses.

To solve this, fabricJS implemented a resize filter class that allows you to use 'bilinear', 'hermite', 'lanczos' or this 'sliceHack' you quoted.

The filter can be applied one time at loading or during every manual resize.

regarding your tries, take note that fabricJS does not scale the image when you call image.scale(0.5), but just on rendering.

So calling image.scale() multiple time does not have any effect. The image is scaled by the internal property scaleX and scaleY once at rendering time.

edited Jan 09 '17 at 22:29

Lee Taylor

7,761
16
33
49

answered May 21 '15 at 11:13

AndreaBogazzi

14,323
3
38
63

Hi AndreaBogazzi, thank you for your reply. I'm trying to use this line: img.filters.push( new fabric.Image.filters.Resize( { resizeType: 'sliceHack', scaleX: 1, scaleY: 1 } ) ); but I see an error when debugging the code saying that fabric.Image.filters.Resize is undefined. Do you know why? – Bruno Jun 27 '15 at 23:43
I found out that it was because the version being used was 1.4.3. I'm trying to upgrade to the last version of Fabricjs to see if the sliceHack filter will work. – Bruno Jun 28 '15 at 00:16
Hi AndreaBogazzi, I used sliceHack and it worked. I can't post my answer as a post, because I receive this message: "We are no longer accepting answers from this account", but I put my answer together the question. Thanks. – Bruno Jun 28 '15 at 02:05

Fabricjs resize loses resolution

1 Answers1