使用setSrc後FabricJS無法縮放圖像

Question

編輯後，我使用fabricJS setSrc函數替換畫布上的圖像。我需要在更換原始圖像後保持原始圖像的寬度，但它似乎不起作用，我認爲它應該如此。這裏是我的功能：

function replace_current_img(src){ 
    if(selected_object){ 
     //Get current object width 
     var current_width=selected_object.getWidth(); 

     selected_object.setSrc(src, function(){ 
       selected_object.scaleToWidth(current_width); 
       canvas.renderAll(); 
     }); 
    } 
} 

我已經驗證current_width變量被設置正確，但似乎沒有任何使裝車後更換圖像的大小調整。另一個奇怪的是，我可以在控制檯中輸入這個確切的代碼（通過手動設置current_width），並按預期工作。

我甚至嘗試過使用setTimeout來使任何加載問題無效，但那也行不通。

是否有一種特殊的方式來設置使用setSrc後的圖像對象的寬度？

Answer 1

這可以實現下列任一兩種方式之一...

▸加入

selected_object.scaleToHeight(current_height); 

其次是線

selected_object.scaleToWidth(current_width); 

▸使用setWidth和setHeight方法

selected_object.setWidth(current_width); 
selected_object.setHeight(current_height); 

ᴅᴇᴍᴏ

var canvas = new fabric.Canvas('canvas') 
 
var replace_img = document.querySelector('#replace_img'); 
 

 
fabric.Image.fromURL('http://lorempixel.com/100/100/', function (img) { 
 
    img.set({ 
 
     top: 40, 
 
     left: 40 
 
    }) 
 
    canvas.add(img); 
 
}); 
 

 
function replace_current_img(src) { 
 
    selected_object = canvas.getActiveObject(); 
 
    if (selected_object) { 
 
     //Get current object width 
 
     var current_width = selected_object.getWidth(); 
 
     var current_height = selected_object.getHeight(); 
 
     selected_object.setSrc(src, function() { 
 
      // method#1 
 
      selected_object.scaleToWidth(current_width); 
 
      selected_object.scaleToHeight(current_height); 
 
      // method#2 
 
      // selected_object.setWidth(current_width); 
 
      // selected_object.setHeight(current_height); 
 
      canvas.renderAll(); 
 
     }); 
 
    } 
 
} 
 

 
replace_img.onclick = function() { 
 
    replace_current_img('http://lorempixel.com/100/100/'); 
 
}

canvas{border: 1px solid #ccc}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script> 
 
<button id="replace_img">Replace Image</button> 
 
<canvas id="canvas" width="180" height="180"></canvas>