All geek questions in one place

In FabricJS, changing the src of an image element changes all the properties of this object

In Fabric.js canvas, I'm trying to replace the src of an image object with a high resolution image to maintain image quality when using canvas.toDataURLWithMultiplier .

When I change the src of an image object, all its properties also change. The image object is scaled to a different size automatically and all state properties change.

This comes from version 0.9.15. When I use version 0.8.32, it works. Version 0.8.32 does not have this problem.

Here is the code:

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

I tried to get the initial state properties of the image object, and then set the values ​​for the modified image object. But that did not work.

Any solution to this problem?

+4
source share
2 answers

If the .width and .height not explicitly set, they will load their values ​​from the image and will do this every time the image is resized.

If you subsequently explicitly set the values, they will retain these values ​​when loading the following image:

 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 size img.src = 'image2.jpg'; } img.src = 'image1.jpg';
+5
source

// I use the setSRC function, it works for me !!!

 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'); });
0
source

Source: https://habr.com/ru/post/1443024/

More articles:


All Articles