在FabricJS中，更改圖像元素的src會更改該對象的所有屬性
[英]In FabricJS, changing the src of an image element changes all properties of that object
問題描述
在Fabric.js畫布中，我試圖將圖像對象的src替換為高分辨率圖像，以便在使用canvas.toDataURLWithMultiplier時保持圖像質量。
當我更改圖像對象的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>
我試圖獲取圖像對象的初始狀態屬性，然后設置更改的圖像對象的值。 但它沒有用。
任何解決這個問題的方法？
2 個解決方案
解決方案1
5 已采納 2012-10-30 15:46:15
如果沒有明確設置.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';
解決方案2
1 2017-01-20 05:52:22
//使用setSRC函數，對我有用!!!
var ancho_original= item_Activo_canvas.width; var alto_original= item_Activo_canvas.height; item_Activo_canvas.setSrc(base64Img , function(img) { item_Activo_canvas.set({width: ancho_original, height: alto_original}); canvas.renderAll(); item_Activo_canvas.setCoords(); console.log('cargado onload'); });
更改圖像元素的src屬性並獲取尺寸屬性
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.