[JavaScript知识库] js获取图片宽高等数据

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> js获取图片宽高等数据 -> 正文阅读

[JavaScript知识库]js获取图片宽高等数据

一、根据图片链接url 来获取图片宽高

getImageSize(url) {
          return new Promise((resolve) => {
              var img = document.createElement("img");
              img.src = url;
              img.onload = () => {
              // 为什么要写 onload  是因为要等他加载完之后才能获取到图片宽高
                  resolve({width:img.naturalWidth,height: img.naturalHeight});   //  2064,4608
              };
          });
 },

二、根据file对象来获取图片宽高

          var reader = new FileReader();
          reader.onload = function (event) {
              var txt = event.target.result;
              var img = document.createElement("img");
              img.src = txt;
              img.onload = function () {
                   console.log(img.width);
                   console.log(img.height);
              }
          };
          reader.readAsDataURL(file);//使用