JavaScript获取图片(Image)的大小(宽度,高度)

获取图片尺寸的方法
如果只有图片的URL

function getImageDimensions(imgStyleRule) {
var defaultSize, img;
defaultSize = {
width: 10,
height: 30
};
if (!imgStyleRule || !imgStyleRule.style || !imgStyleRule.style.backgroundImage) {
return defaultSize;
}
img = new Image();
img.src = imgStyleRule.style.backgroundImage.replace(/url\(|\)$|"/ig, '');
return {
width: img.width,
height: img.height
};
}


[size=medium]
如何获取imgStyleRule, 参考
[url]http://darrenzhu.iteye.com/admin/blogs/2065946[/url]


如果图片已经加载,可以通过如下方式获取

var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

[/size]
### 如何在微信小程序中获取图片高度宽度 #### 使用 `wx.getImageInfo` 方法 为了提前获取远程图片的尺寸信息,在不实际显示图片的情况下,可以利用 `wx.getImageInfo` 接口来实现这一需求。此方法允许开发者传入目标图像的 URL 地址,并返回有关该图的信息对象,其中包含了宽度 (`width`)高度 (`height`) 属性。 ```javascript wx.getImageInfo({ src: 'https://example.com/image.jpg', success: function(res){ console.log(`Image Width:${res.width}, Image Height:${res.height}`); const ratio = res.width / res.height; console.log(`Aspect Ratio is ${ratio}`); } }); ``` 上述代码展示了如何调用 `getImageInfo` 函数并处理成功回调中的响应数据[^1]。 #### 利用 `<image>` 组件事件监听器 当页面上存在 `<image>` 标签时,可以通过绑定其 `bindload` 或者 `onLoad` 事件处理器来捕获加载完成后的自然尺寸属性。这适用于那些已经在界面上呈现出来的本地或网络资源。 ```html <view> <image src="{{imageUrl}}" mode="aspectFit" @load="handleImageLoaded"> </image> </view> ``` 对应的 JavaScript 部分如下: ```javascript Page({ handleImageLoaded(e) { let detail = e.detail; console.log(detail.width, detail.height); }, }) ``` 这段脚本定义了一个名为 `handleImageLoaded` 的函数用于接收由视图层触发的 load 事件携带的数据,进而打印出所载入图片的实际宽高值[^4]。 #### 设置 Swiper 中动态调整子项大小 对于包含多张幻灯片形式展示的内容区域(如轮播图),可能希望基于当前选中项的具体情况自动改变容器布局参数。此时可以在 swiper-item 内部放置 image 并为其指定特定样式规则以及相应的交互逻辑以确保每次切换都能及时更新关联样式。 ```css .swiper-container .swiper-slide img{ width: 100%; } ``` 配合 JS 处理逻辑: ```javascript data() { return { images: [ '/path/to/img1.png', '/path/to/img2.png' ], slideIndex: 0, slidesHeight: [] }; }, methods:{ onSwiperChange(event){ const index = event.currentTarget.dataset.index; this.slideIndex = index; // 假设已经预先知道了各张图片的真实尺寸... if (!this.slidesHeight[index]){ wx.getImageInfo({ src:this.images[index], success:(info)=>{ this.$set(this.slidesHeight,index,(750/info.width)*info.height+'rpx'); } }); } } } ``` 这里假设有一个 swiper 容器内的多个滑动项目,每当用户翻页时都会重新评估新位置处元素的最佳视觉表现方式[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值