介绍重点:在图片加载完成后获取对应的图片信息。
//, wxml
& lt; view ,在
,& lt; image src=癶ttps://sf3-ttcdn-tos.pstatp.com/img/mosaic-legacy/3796/2975850990 300 x300.image", bindload=發oadSuccess",祝辞& lt;/image>
& lt;/view>//js
页面({
,数据:{
,imageHeight: 0,
,imageWidth: 0
},
,loadSuccess (e) {
{,const ,细节:{}宽度,高度,},=,e
,this.setData ({
,,imageWidth:宽度,
imageHeight才能:高度
,})
,}
}) //, 750 x110的图片
& lt; view ,在
,& lt; image src=https://www.yisu.com/zixun/https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba1f75f0d29c40759b43ef910dacb4e7 ~ tplv-k3u1fbpfcp-watermark.image模式=" widthFix ">
//750 x480的图片
<视图>
<图像src=" https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba1f75f0d29c40759b43ef910dacb4e7 tplv-k3u1fbpfcp-watermark.image”模式=" widthFix ">
这篇文章给大家介绍怎么在微信小程序中获取图片的宽度与高度,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
重点:在图片加载完成后获取对应的图片信息。
经查小程序开发文档后发现,有提供加载成功的回调,如下:
演示演示如下:
先来看看效果:
思考个问题:,假设我有100张图片都需要做自适应,那么是不是多了很多繁琐的setData(),同时也会导致性能问题。
<强>进阶方案
经朋友提醒后发现,小程序图像还有个属性叫做模式,可以去设置图片的裁剪,缩放等形式。
关于模式属性的取值可选项如下图:
话不多说,我们看看实际效果如何:
看看750 x110的效果图:
再看看750 x480的效果图:
关于怎么在微信小程序中获取图片的宽度与高度就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
