在 canvas HTML5 中查找上传的图片的宽度和高度。（有文件 reader）

Question

我正在使用 HTML5 和 fabric js 在 canvas 中上传多张图片。现在我正在 canvas 中上传多张图片。但我想找到上传的图像宽度和高度。我看过一个linkCheck image width and height before upload with Javascript

在此 link 中未使用文件 reader。但在我的例子中使用文件 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>

Answer 1

您可以创建一个 img 标签并从中获取尺寸。

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>

Answer 2

@jcubic 关于使用 <img> 标签是正确的，（虽然没有它也有一些方法可以获取此信息） 但他在如何使用方面是绝对错误的他获取图像的尺寸。

.clientWidth 和 .clientHeight 将 return <img> 元素的计算宽度。您不关心它，因为您在 canvas 上绘制的是 <img> 中包含的图像，而不是 <img> 元素本身。

那么您需要的是 .width 和 .height 属性或 .naturalWidth 和 .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>

在 canvas HTML5 中查找上传的图片的宽度和高度。（有文件 reader）

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

html

javascript

canvas

fabricjs