I am currently trying to create a web app to be able to upload images on a canvas using fabric.js. I am able to upload the images but have been unable to retrieve the dimensions of the image when I resize the image inside the canvas. Is there a way, that can be solved? Also, how do I handle it when multiple images are uploaded in realtime?
<!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>In Fabric.js, an image's scaled width/height values can be obtained with the getScaledWidth() and getScaledHeight() methods.
<!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>