美文网首页web前端
如何获取上传图片的宽高

如何获取上传图片的宽高

作者: 姜治宇 | 来源:发表于2021-09-07 18:07 被阅读0次

今天遇到这样一个需求:
上传一张图片前,需要先获取一下图片的缩放比例。
缩放比例以64px为基准,然后除以图片的宽高中最大值。那图片的宽和高如何获取呢?
首先要用FileReader的readAsDtataURL方法读到图片的url(base64),然后new一个Image实例,将src指向这个url,然后在image.onload回调函数中即可拿到图片宽和高。

  getMaxWidthHeight(file){
  
    return new Promise((resolve)=>{
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onloadend = (res)=>{
        
        let image = new Image();
        if(res.target && res.target.result) {
          (image.src as any) = res.target.result;
  
          image.onload = ()=>{
           
            resolve(Math.max(image.width,image.height));
          }
  
        }
        
      }
    });

  }
 async uploadPic(e) {
    let scale = 1;
    let file = e.target.files[0];
    let maxWidthHeight = await getMaxWidthHeight(file);
    if(maxWidthHeight && typeof maxWidthHeight === 'number' && maxWidthHeight!==0) {
      scale = 64/maxWidthHeight;
    }
    console.log('缩放比例>>>',scale);
}

相关文章

网友评论

    本文标题:如何获取上传图片的宽高

    本文链接:https://www.haomeiwen.com/subject/jerpwltx.html