前端获取图片宽高的几种方法

有时候动态加载图片,会因为图片宽高导致显示拉伸情况,如果能根据图片URL地址获取到图片的宽高,再进行渲染,就可以了,以下两种方案供参考:

方法一:

        // 图片地址

        var imgUrl = "line.jpg";

        // 实例对象

        var img = new Image();

        // 赋值图片地址

        img.src = imgUrl;

        // 输出对象信息

        console.log('width:' + img.width + ',height:' + img.height);

方法二:

        getImgWidth('line.jpg').then((res) => {

            console.log(res)

        })

        function getImgWidth(imgUrl) {

            return new Promise((resolve, reject) => {

                let img = new Image()

                let obj = {}

                img.onload = function() {

                    obj = {

                        width: this.width,

                        height: this.height,

                    }

                    resolve(obj)

                }

                img.src = imgUrl

            })

        }

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值