在 Fabric.js Canvas 中，我试图将图像对象的 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>
我尝试获取图像对象的初始状态属性，然后为更改后的图像对象设置值。但它没有用。
这个问题有什么解决办法吗？
最佳答案
如果 .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';
关于javascript - 在 FabricJS 中，更改图像元素的 src 会更改该对象的所有属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13142509/