在FabricJS中，更改圖像元素的src會更改該對象的所有屬性

在Fabric.js畫布中，我試圖將圖像對象的src替換爲高分辨率圖像以保持圖像質量當使用canvas.toDataURLWithMultiplier時。在FabricJS中，更改圖像元素的src會更改該對象的所有屬性

當我更改圖像對象的src時，其所有屬性也會改變。圖像對象會自動縮放到不同的大小，並更改所有狀態屬性。

這發生在版本0.9.15。當我使用0.8.32版本時，它可以工作。版本0.8.32沒有這個問題。

下面的代碼：

<body> 
    <button id="click" onclick="changeImage()">Change Image</button> 

    <canvas id="canvas" width="300px" height="300px" style="border:2px solid #000;"> 
<script> 

    canvas = new fabric.Canvas('canvas'); 
    fabric.Image.fromURL("http://timeplusq.com/dakshin/clip03.png", function(obj) { 

    canvas.add(obj.scale(1).rotate(-15).set({ 
     left: 80, top: 95 
    })); 

    }); 

    function changeImage(){ 
    var tmp=canvas.item(0).getElement(); 
    var src = tmp.src;  

    tmp.setAttribute("src", 'http://timeplusq.com/dakshin/clip03original.png'); 

    //Its a 106KB size image 

    canvas.renderAll(); 
    canvas.calcOffset();    
    } 

    </script> 
</body>

我試圖讓圖像對象的初始狀態屬性，然後用於改變的圖像對象設置值。但它沒有奏效。

對此問題的任何解決方案？

來源

2012-10-30 santhgates

如果.width和.height屬性不明確一套，他們會從映像加載它們的值，並且每個圖像改變時會這麼做。

如果隨後明確設置的值，他們會保留這些值加載下一個圖像時：

var img = new Image(); 

img.onload = function() { 
    this.width = this.width; 
    this.height = this.height; 

    // subsequent image loads will be forced to this first image's size 
    img.src = 'image2.jpg'; 
} 

img.src = 'image1.jpg';

來源

2012-10-30 15:46:15 Alnitak

感謝很多:)ü救了我的一天:) – santhgates

//使用setSRC功能，對我的作品！

var ancho_original= item_Activo_canvas.width; 
 
var alto_original= item_Activo_canvas.height; 
 

 

 
item_Activo_canvas.setSrc(base64Img , function(img) { 
 
\t  
 
      item_Activo_canvas.set({width: ancho_original, height: alto_original}); 
 
      canvas.renderAll(); 
 
      item_Activo_canvas.setCoords(); 
 
\t \t \t console.log('cargado onload'); 
 
     });

來源

2017-01-20 05:52:22

在FabricJS中，更改圖像元素的src會更改該對象的所有屬性

回答

相關問題