前端工具方法：前端如何获取图片的尺寸

天天向上的鹿茸

已于 2022-12-02 11:03:26 修改

阅读量1k

点赞数 1

分类专栏：前端文章标签：前端 javascript react.js

于 2022-07-05 21:39:55 首次发布

本文链接：https://blog.csdn.net/weixin_45696837/article/details/125628641

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

今天在写react组件的时候多次用到前端图片的尺寸，就写了工具方法获取图片的尺寸

/**
 * 获取图片的原始尺寸 支持回调和promise
 * @param src
 * @param cb
 */
export const getImageSize = (src: string, cb?: (size: ImageSize) => void) => {
  const oImg = new Image();
  if (cb) {
    oImg.addEventListener('load', function () {
      typeof cb === 'function' &&
        cb({
          width: this.naturalWidth,
          height: this.naturalHeight,
        });
    });
  }

  // 返回一个promise
  const rePro = new Promise((resolve) => {
    oImg.addEventListener('load', function () {
      resolve({
        width: this.naturalWidth,
        height: this.naturalHeight,
      });
    });
  });

  oImg.src = src;
  return rePro;
};