上传图片之后如何获取图片的尺寸？

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情

前言

前后大小也写了几个项目了，在开发过程中发现有很多代码其实重复性特别高，每次开发时都是找到原来项目都是使用CV大法，果然不负CV工程师之名。今天借着没活干将以前高频率业务代码进行封装一下。上传图片之后，有时候需要将图片及其尺寸一起传送给后端，但是上传之后获取的数据是File对象，其中并不包含它的尺寸，所以需要我们利用前端的相关技术获取到尺寸一起给后端。这里图片也分两种情况：

• 图片给的是链接
• 利用input标签上传的File对象

直接是URL的情况

如果直接给的链接，那么这种情况就会简单许多，要么构造Image实例，要么创建一个img标签，这两个是等价的，我们这里使用Image实例:

• 创建Image的HTMLImageElement实例
• 加载load事件回调
• 将链接复制给image.src

接下来看看代码是咋写的吧

 function getImageSize(resource) {
   const img = new Image();
   return new Promise(function (resolve, reject) {
       img.onload = function () {
           resolve([this.width, this.height])
       }
       //   检测是不是url
       if (resource && typeof resource === 'string') {
           //  使用原生image来做
           img.src = resource;
       }
   })
}

getImageSize(图片链接).then(res=>console.log(res))// [1200,900]

看样子这种情况就搞定啦，看另一种情况。

input标签上传

即然要用input标签就得有元素。我们先把前期准备工作做好。

• 写入input标签
• 监听change事件
• 拿到File对象传入getImageSize

我们这里看看上传之后得到的File对象长什么样子。

但是Img的src并不认识File对象，除了链接之外还有base64,所以我们需要将对象转成base64,那base64又是什么呢

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhoA......

这种就是base64的格式，以data开头加上图片的格式image/png。 但是又遇到一个新的问题问题，Filed对象如何转成base64呢？ FileReader可以获取到对象的数据，它提供了一个方法：

• readAsDataURL：读取文件内容，结果用data:url的字符串形式表示

这正是我们想要的。 因此步骤就是：

• 创建FileReader实例
• readAsDataURL读取对象内容转成data:url字符串
• 字符串覆给src
• 得到尺寸

// html
    <input type="file" name="file" id="file">

//js
function getImageSize(resource) {
    const img = new Image();
    return new Promise(function (resolve, reject) {
        img.onload = function () {
            resolve([this.width, this.height])
        }
         //FIle对象或者blob对象
            FileTobase64(resource, function (type, source) {
                if (type === "success") {
                    console.log(source)
                    img.src = source
                } else {
                    reject(source)
                }
            })
    })
}

function FileTobase64(File, callback) {
    let reader = new FileReader()
    reader.readAsDataURL(File);
    reader.onload = function () {
        callback("success", this.result)
    }
    reader.onerror = function (err) {
        callback("error", err)
    }
}   


 document.querySelector("#file").addEventListener("change", (e) => {
        console.log(e)
        const file = e.target.files[0];
        getImageSize(file).then(res => {
            console.log(res); // [538,148]
        })
    })

这两种方式我们就搞定啦！！！

end

每天进步一点点，又是美好的一天！