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

有时候动态加载图片，会因为图片宽高导致显示拉伸情况，如果能根据图片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

})

}

前端获取图片宽高的几种方法相关推荐

JS快速获取图片宽高的方法
JS快速获取图片宽高的方法快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括I ...
android 通过图片url获取宽高_通过 URL 获取图片宽高优化
一张小图.png 前言客户端研发时,有时会有这样的需求,需要根据图片链接地址获取图片的宽高来进行界面排版. 一般比较正规的做法,是服务端在返回数据时将图片的信息属性一起带回来,这也符合轻客户端设计规 ...
vue-preview动态获取图片宽高并增加旋转功能
vue-preview是一个常用的图片查看器,微博网页版就是用的这个插件: 我在项目中也用过这个插件,总体来说,还是比较满意.但是缺少一个图片旋转功能. 安装使用第一步:安装 npm i vue-p ...
html获取此次点击的id,github项目解析（八）--Activity启动过程中获取组件宽高的三种方式...
转载请标明出处:1片枫叶的专栏上1个github小项目中我们介绍了避免按钮重复点击的小框架,其实现的核心逻辑是重写OnClickListener的onClick方法,添加避免重复点击的逻辑,即为第2 ...
Unity快速获取图片宽高
写这个好像有瘾,根本停不下来. Unity要想获得图片尺寸,必须是加载到图片之后才能获取宽高,普通的获取尺寸方式在获取到Texture2D后,通过Texture2D的width.height属性获得. ...
获取图片宽高、大小和图片类型
直接贴代码 public static void main(String[] args) {String picUrl = "http://placeimg.com/640/480/any. ...
php获取图片宽高相反,exif_read_data()解决上传图片旋转、图片反向问题，getimagesize获取图片高度宽度相反的问题...
PHP getimagesize 函数获取的图像宽高反了? exif_read_data()解决上传图片旋转.图片反向问题,getimagesize获取图片高度宽度相反的问题,手机图片上传之后出现了反 ...
不实例化图片，获取图片宽高的方法（vb.net）
'''<summary>''' 不打开图片获取图片大小'''</summary>'''<param name="filename"></p ...
java 实现BufferedImage和ImageReader两种方式获取图片宽高、判断图片类型、获取图片大小工具类代码以及测试响应结果
源码: import org.springframework.web.multipart.MultipartFile;import javax.imageio.ImageIO; import java ...

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

前端获取图片宽高的几种方法相关推荐

最新文章

热门文章