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縮放一次。