在 FabricJS 中，更改图像元素的 src 会更改该对象的所有属性答案

【问题标题】：In FabricJS, changing the src of an image element changes all properties of that object在 FabricJS 中，更改图像元素的 src 会更改该对象的所有属性
【发布时间】：2012-10-20 00:00:04
【问题描述】：

在 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>

我尝试获取图像对象的初始状态属性，然后设置更改后的图像对象的值。但它没有用。

这个问题有什么解决办法吗？

【问题讨论】：

标签： javascript canvas html5-canvas fabricjs

【解决方案1】：

如果.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】：

//使用 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'); 
        });

【讨论】：

优秀的方法，兼容 LumenCanvas 并且只在更改图像后渲染画布。恭喜！