Fabricjs 调整大小失去分辨率

Question

我有一个网站，其中有一部分可以上传图片并调整图片大小。要更改图像的大小，请使用 Fabricjs (http://fabricjs.com/)。

问题是当图像调整大小时它失去了分辨率，改变大小后看起来非常难看。这是用于完成该操作的代码：

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

}

我找到了这个 link 并尝试逐渐减小图像的大小，但没有用。我这样试过：

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

我也发现了这个 link 并尝试像下面那样减小图像的大小，但效果不佳：

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

希望有人能帮忙。感谢您的帮助。

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

更新答案：

它是这样工作的：

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

Answer 1

图像没有丢失分辨率，您注意到的丑陋效果来自 canvas 使用的 "nearest neighbour" 调整大小算法。

为了解决这个问题，fabricJS 实现了一个调整大小过滤器 class，允许您使用 'bilinear'、'hermite'、'lanczos' 或您引用的 'sliceHack' .

可以在加载时或每次手动调整大小时应用一次过滤器。

关于您的尝试，请注意 fabricJS 在您调用 image.scale(0.5) 时不会缩放图像，但只会在渲染时缩放。

所以多次调用image.scale()没有任何效果。图像在渲染时由内部属性 scaleX 和 scaleY 缩放一次。

Fabricjs 调整大小失去分辨率

Fabricjs resize loses resolution

resolution

fabricjs