Menu
In Fabric.js canvas, I'm trying to replace of the src of the image object to a high resolution image so as to maintain the image quality when canvas.toDataURLWithMultiplier is used.
When I change the src of the image object, all its properties also change. The image object scales to a different size automatically and all the state properties are changed.
This happens from the version 0.9.15. When I use version 0.8.32, it works. Version 0.8.32 doesn't have this issue.
Here's 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 setting the values for the changed image object. But it didn't work.
Any solution to this problem?
306
If the .width and .height attributes are not explicitly set, they will load their values from the image, and will do so each time the image is changed.
If you subsequently explicitly set the values, they will be keep those values when the next image is loaded:
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';
//use setSRC function , 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');
});If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
