微信小程序如何获取图片宽度与高度_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

起源

最近在做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="/uploads/allimg/210918/11451BO9-3.jpg" 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="/uploads/allimg/210918/1145164437-7.jpg" mode="widthFix"></image>
</view>

// 750x480的图片
<view style="width:100%;" >
 <image src="/uploads/allimg/210918/1145164437-7.jpg" mode="widthFix"></image>
</view>

看看750x110的效果图:

再看看750x480的效果图:

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

最后

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

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

原文链接：https://m.jb51.net/article/207292.htm

版权声明：本文转载自网络，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的，如有侵权请联系QQ/微信：153890879删除

相关文章

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

微信小程序授权登录的优雅处理方式

微信小程序请求前置的方法详解

10分钟彻底搞懂微信小程序单页面应用路