V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
LeeReamond
V2EX  ›  程序员

前端 javascript 如何获取图片的宽高?

  •  
  •   LeeReamond · 2022-07-30 09:52:56 +08:00 · 1355 次点击
    这是一个创建于 607 天前的主题,其中的信息可能已经有所发展或是发生改变。

    想要实现的效果:图片固定按原始大小显示,不随窗口缩放而变化大小。

    stackoverflow 查了一番,给的方案似乎都是将图片设置为 div 的 background 这样就不会跟着变了。

    但同时我的需求上还需要获取图片宽高。

    使用标签的方案下,为 img 添加 onload 事件即可用 img.width 获取图片宽高。但是切换到 div-background 方案后,onload 事件需要用 eventlistener 实现,目前用的大概是下述方案:

    let load_image = (src) => {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.addEventListener('load', resolve(img));
        img.addEventListener('error', reject(img));
        img.src = src;
      });
    }
    
    load_image(src).then((img) => {
      img_div.style.background = "url("+src+") no-repeat scroll left top transparent";
      console.log(img.width);
    });
    
    load_image('/url/to/img.jpg')
    

    比较诡异的是 console.log(image.width);这行打印出来宽度是 0 ,理论上来说我没理解错的话这代码不是在图片 src 加载完成后才执行的回调,为啥会得到 0 的宽度呢。有啥方法获得实际宽高吗?

    toesbieya
        1
    toesbieya  
       2022-07-30 10:01:39 +08:00
    img.addEventListener('load', () => resolve(img));
    CHCH
        2
    CHCH  
       2022-07-30 10:01:44 +08:00
    resolve 会立马运行吧
    Zzzz77
        3
    Zzzz77  
       2022-07-30 10:05:26 +08:00
    ```typescript
    const getImageSize = (src: string) => {
    return new Promise(resolve => {
    const img = document.createElement('img')
    img.src = src
    img.style.opacity = '0'
    document.body.appendChild(img)

    img.onload = () => {
    const imgWidth = img.clientWidth
    const imgHeight = img.clientHeight

    img.onload = null
    img.onerror = null

    document.body.removeChild(img)

    resolve({ width: imgWidth, height: imgHeight })
    }

    img.onerror = () => {
    img.onload = null
    img.onerror = null
    }
    })
    }
    ```
    sutra
        4
    sutra  
       2022-07-30 10:22:28 +08:00   ❤️ 1
    naturalWidth naturalHeight
    zhuweiyou
        5
    zhuweiyou  
       2022-07-30 10:40:38 +08:00
    因为你代码写错了, () => resolve(img)
    mingdongshensen
        6
    mingdongshensen  
       2022-07-30 10:47:08 +08:00
    代码写错啦
    jinliming2
        7
    jinliming2  
       2022-07-30 11:05:09 +08:00 via iPhone
    代码错啦,事件是要给回调函数的
    LeeReamond
        8
    LeeReamond  
    OP
       2022-07-30 11:10:28 +08:00
    @zhuweiyou
    @mingdongshensen
    @jinliming2
    @Zzzz77
    @toesbieya 谢谢,各位方案都有效
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3264 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 14:17 · PVG 22:17 · LAX 07:17 · JFK 10:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.