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

更新时间：2021年03月10日 11:36:28 作者：bug制造者

这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

起源

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

我以为的

// 为便于讲解, 将css作为style属性绑定[实际不推荐]&& src的值先写死[后期改成接口返回的即可]
<view style="width:100%;">
 <image src="{{src}}"></image>
</view>

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

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

解决方案

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

初级方案

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

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

演示Demo如下:

// wxml
<view style="width:100%;" >
 <image src="https://sf3-ttcdn-tos.pstatp.com/img/mosaic-legacy/3796/2975850990~300x300.image" bindload="loadSuccess" style="width:{{imageWidth}}px; height:{{imageHeight}}px"></image>
</view>

//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的图片
<view style="width:100%;" >
 <image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba1f75f0d29c40759b43ef910dacb4e7~tplv-k3u1fbpfcp-watermark.image" mode="widthFix"></image>
</view>

// 750x480的图片
<view style="width:100%;" >
 <image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba1f75f0d29c40759b43ef910dacb4e7~tplv-k3u1fbpfcp-watermark.image" mode="widthFix"></image>
</view>

看看750x110的效果图:

再看看750x480的效果图:

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

最后

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

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

您可能感兴趣的文章:

JavaScript使用DeviceOne开发实战（二）生成调试安装包
这篇文章主要介绍了JavaScript使用DeviceOne开发实战（二）生成调试安装包的相关资料,需要的朋友可以参考下
2015-12-12
详解用async/await来处理异步
这篇文章主要介绍了详解用async/await来处理异步，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
javascript动态的改变IFrame的高度实现自动伸展
动态的改变IFrame的高度，实现IFrame自动伸展，父页面也自动神缩，实现原理很简单就是在IFrame子页面一加载的时候，调用父IFrame对象，改变其高度，感兴趣的朋友可以了解下
2013-10-10
JS弹出窗口代码大全(详细整理)
如何利用网页弹出各种形式的窗口，我想大家大多都是知道些的，但那种多种多样的弹出式窗口是怎么搞出来的，平时利用业余时间整理了一些，需要的朋友可以参考一下
2012-12-12
javascript实现10个球随机运动、碰撞实例详解
这篇文章主要介绍了javascript实现10个球随机运动、碰撞的方法,实例分析了javascript实现小球碰撞的原理与实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
web开发js字符串拼接占位符及conlose对象Api详解
本篇文章主要为大家介绍了web开发中字符串的拼接，占位符的使用以及conlose对象Api的使用，有需要的朋友可以借鉴参考下，希望可以有所帮助
2021-09-09
JavaScript 微任务和宏任务讲解
这篇文章主要分享了JavaScript 微任务和宏任务讲解，在js中，我们一般将所有的任务都分成两类，一种是同步任务，另外一种是异步任务。而在异步任务中，又有着更加细致的分类，那就是微任务和宏任务，下面来一起学习js中的微任务和宏任务吧
2021-12-12
JavaScript实现数组去重的7种方法
去重是开发中经常会碰到的一个热点问题，本文详细的介绍了JavaScript实现数组去重的7种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-03-03
JavaScript实现拼图式滑块验证功能
滑块验证码是在网站、APP等应用中常见的一种验证方式，通过按照一定规则滑动滑块到指定位置完成验证，才可以进行下一步操作，本文给大家分享基于JavaScript实现拼图式滑块验证功能，感兴趣的朋友一起看看吧
2022-06-06
java遇到微信小程序 "支付验证签名失败" 问题解决
这篇文章主要介绍了java遇到微信小程序 "支付验证签名失败" 问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12