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

图像不会失去分辨率，您注意到的丑陋效果来自画布使用的“最近邻居”调整大小算法。为了解决这个问题，fabricJS实现了一个resize过滤器类，允许你使用'bilinear'，'hermite'，'lanczos'或者你引用的这个'sliceHack'。

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

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

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