Find width and height uploaded image in canvas HTML5.(With file reader)

Question

I am using HTML5 and fabric js for uploading multiple image in canvas. Right now i am uploading multiple image in canvas. But i want to find uploaded image width and height. I have seen one link Check image width and height before upload with Javascript

In this link not using file reader. But in my case using file reader.

 var canvas = new fabric.Canvas('canvas');
   document.getElementById('file').addEventListener("change",function (e) {
   var file = e.target.files[0];
   var reader = new FileReader();
   console.log("reader   " + reader);
   reader.onload = function (f) {
   var data = f.target.result;
   fabric.Image.fromURL(data, function (img) {
   var oImg = img.set({ width: 250, height: 200, angle: 0}).scale(0.9);
   canvas.add(oImg).renderAll();
   var a = canvas.setActiveObject(oImg);
   var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
   });
   };
   reader.readAsDataURL(file);
   });

 canvas{
  border: 1px solid black;
 }

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
 <input type="file" id="file">
  <div style="">
   <canvas id="canvas" width="450" height="450"></canvas>
  </div>

jcubic · Answer 1 · 2016-01-25T12:39:24.807

1

You can create an img tag and get the dimensions from it.

document.getElementById('file').addEventListener("change",function (e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  var output = document.getElementById('output');
  reader.onload = function (f) {
    var data = f.target.result;
    var img = document.createElement('img');
    img.src = data;
    img.onload = function() {
      output.innerHTML = 'width: ' + img.width + '\n' +
        'height: ' + img.height;
    };
  };
  reader.readAsDataURL(file);
});

<input type="file" id="file"/>
<pre id="output"></pre>

edited Jan 25 '16 at 12:39

answered Jan 25 '16 at 11:22

jcubic

61,973
54
229
402

1

Why do we need to append it in DOM ? – Rayon Jan 25 '16 at 11:31
@RayonDabre if you don't do this the width and height is 0. – jcubic Jan 25 '16 at 11:37
We can get is using `img.width` once image is loaded right ? – Rayon Jan 25 '16 at 11:39
@jcubic. Can we find width and height before upload image in canvas. – Varun Sharma Jan 25 '16 at 11:59
why do you use `.clientWidth`? `.width` will give you the width of the image. No need to append it to doc. If some css rules interact on evrey images, your values will be wrong – Kaiido Jan 25 '16 at 12:19
@Kaiido I thought it was needed, I've updated the code. – jcubic Jan 25 '16 at 12:39

score 0 · Accepted Answer · answered Jan 25 '16 at 12:27

@jcubic is right about using an <img> tag, (while there would be some ways to get this info without it) but he is absolutely wrong in how he gets the image's dimensions.

.clientWidth and .clientHeight will return the computed width of the <img> element. You don't care about it, since what you are drawing on your canvas is the image contained in the <img>, not the <img> element itself.

What you need then is .width and .height properties or .naturalWidth and .naturalHeight.

document.getElementById('file').addEventListener("change",function (e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  var output = document.getElementById('output');
  reader.onload = function () {
    var data = this.result;
    var img = new Image();
    img.src = data;
    img.onload = function() {
      output.innerHTML = 'width: ' + img.width + '\n' +
        'height: ' + img.height;
    };
  };
  reader.readAsDataURL(file);
});

<input type="file" id="file"/>
<pre id="output"></pre>

Can this be done with canvas instead of loading the image in a `img` tag? I'm using canvas for resizing the image, but I wonder if I could avoid the step of loading the src on a image — Frondor, Jun 06 '18 at 21:03

Find width and height uploaded image in canvas HTML5.(With file reader)

2 Answers2