微信小程序如何获取图片宽度与高度

2023-07-04 10:35:03 217

起源

最近在做A需求,其中有个小功能点描述如下:从配置端返回张图片,期望宽度不变(750)、高度根据图片自适应.

我以为的

//为便于讲解,将css作为style属性绑定[实际不推荐]&&src的值先写死[后期改成接口返回的即可]

我一开始想到的就是:设置内容区的width:100%会自动占满屏幕宽度,高度就会自适应.

实际效果:image占据空间为:屏幕宽度x0

解决方案

核心:解决如何获取图片的高度

初级方案

重点:在图片加载完成后获取对应的图片信息.

经查小程序开发文档后发现,有提供加载成功的回调,如下:

演示Demo如下:

//wxml




//js
Page({
data:{
imageHeight:0,
imageWidth:0
},
loadSuccess(e){
const{detail:{width,height}}=e
this.setData({
imageWidth:width,
imageHeight:height
})
}
})

先来看看效果:

思考个问题: 假设我有100张图片都需要做自适应,那么是不是多了很多繁琐的setData(),同时也会导致性能问题.

进阶方案

经朋友提醒后发现,小程序image还有个属性叫做mode,可以去设置图片的裁剪&缩放等形式.

关于mode属性的取值可选项如下图:

话不多说,我们看看实际效果如何:

//750x110的图片




//750x480的图片

看看750x110的效果图:

再看看750x480的效果图:

到了这里,只需要把src的值改为接口返回的,是不是就实现了宽度固定、高度自适应的需求了~

最后

该属性主要是为了实现图片的自适应、换个角度来讲,主要是确保图片不失真。

到此这篇关于微信小程序如何获取图片宽度与高度的文章就介绍到这了,更多相关微信小程序获取图片宽高度内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序如何获取图片宽度与高度

起源

我以为的

解决方案

最后

热门推荐

随机推荐