Actualmente estoy tratando de crear una aplicación web para poder cargar imágenes en un lienzo usando fabric.js. Puedo cargar las imágenes, pero no he podido recuperar las dimensiones de la imagen cuando cambio el tamaño de la imagen dentro del lienzo. ¿Hay alguna manera, eso puede ser resuelto? Además, ¿cómo lo manejo cuando se cargan varias imágenes en tiempo real?
<!DOCTYPE html> <html> <head> <title>Test Project</title> </head> <body> <style> canvas{ border: 1px solid black; position: absolute; top: 0px; left: 0px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> <input type="file" id="file"><br /> <canvas id="canvas" width="1000" height="1000"></canvas> <script> var canvas = new fabric.Canvas('canvas'); document.getElementById('file').addEventListener("change", function (e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function (f) { var data = f.target.result; fabric.Image.fromURL(data, function (img) { var oImg = img.set({left: 0, top: 0, angle: 0}).scale(0.2); console.log(oImg.height) console.log(oImg.width) canvas.add(oImg).renderAll(); var a = canvas.setActiveObject(oImg); var dataURL = canvas.toDataURL({format: 'png', quality: 1}); oImg.setControlsVisibility({ mtr: false }) }); }; reader.readAsDataURL(file); }); </script> </body> </html>En Fabric.js, los valores de ancho/alto escalados de una imagen se pueden obtener con los getScaledWidth() y getScaledHeight() .
<!DOCTYPE html> <html> <head> <title>Test Project</title> </head> <body> <style> canvas{ border: 1px solid black; position: absolute; top: 0px; left: 0px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> <input type="file" id="file"><br /> <canvas id="canvas" width="1000" height="1000"></canvas> <script> var canvas = new fabric.Canvas('canvas'); document.getElementById('file').addEventListener("change", function (e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function (f) { var data = f.target.result; fabric.Image.fromURL(data, function (img) { var oImg = img.set({left: 0, top: 0, angle: 0}).scale(0.2); console.log(oImg.getScaledWidth()) console.log(oImg.getScaledHeight()) canvas.add(oImg).renderAll(); var a = canvas.setActiveObject(oImg); var dataURL = canvas.toDataURL({format: 'png', quality: 1}); oImg.setControlsVisibility({ mtr: false }) }); }; reader.readAsDataURL(file); }); </script> </body> </html>