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

图像不会失去分辨率，您注意到的丑陋效果来自画布使用的“最近邻居”调整大小算法。

为了解决这个问题，fabricJS实现了一个resize过滤器类，允许你使用'bilinear'，'hermite'，'lanczos'或你引用的'sliceHack'。

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

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

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

Fabricjs调整大小会失去分辨率

1 个答案: