在js中获取上传图片的宽度和高度

最新推荐文章于 2024-08-05 18:37:33 发布

原创最新推荐文章于 2024-08-05 18:37:33 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

vue 专栏收录该内容

49 篇文章

订阅专栏

这段代码展示了如何使用HTML的input[type=file]元素配合JavaScript的FileReader接口来读取用户选择的图片文件，并在图片加载完成后获取其宽度和高度，存储到mapPictureSize数组中。

Html：

<input type="file" id="MapUploadTd" onchange="getMapPictureSize(this.files[0])"/>

Js：

 var mapPictureSize = [];
  
  function getMapPictureSize(file) {
      var reader = new FileReader;
      reader.onload = function (evt) {
          var image = new Image();
          image.onload = function () {
              mapPictureSize[0] = this.width + "";
              mapPictureSize[1] = this.height + "";
             console.log(mapPictureSize);
         };
         image.src = evt.target.result;
     };
     reader.readAsDataURL(file);
 }