脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序获取图片宽高度

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

 更新时间：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字符串处理常见操作方法小结

    JavaScript字符串处理常见操作方法小结

    这篇文章主要介绍了JavaScript字符串处理常见操作方法,结合实例形式分析了JavaScript字符串操作常见的转换、截取、分割、获取等相关实现技巧,需要的朋友可以参考下
    2019-11-11
  • JavaScript的懒加载处理的方式

    JavaScript的懒加载处理的方式

    懒加载是一种优化技术,它可以延迟加载某些资源,直到它们真正需要被使用的时候才进行加载,实现懒加载的方法一般分为两种：基于 Intersection Observer API 的懒加载和基于滚动事件的懒加载,本文给大家介绍JavaScript的懒加载处理方式,感兴趣的朋友一起看看吧
    2023-10-10
  • 懒就要懒到底——鼠标自动点击（含时间判断）

    懒就要懒到底——鼠标自动点击（含时间判断）

    懒就要懒到底——鼠标自动点击（含时间判断）...
    2007-02-02
  • 让插入到 innerHTML 中的 script 跑起来的实现代码

    让插入到 innerHTML 中的 script 跑起来的实现代码

    在做 ajax 编程时，我们常常需要将 xmlhttp 获取到的页面内容通过 innerHTML 来赋给某个容器（比如 div、span 或者 td 等），但是这里存在一个问题，就是我们将要赋给 innerHTML 的页面内容如果包含有脚本程序，这些脚本程序不管是外部脚本，还是内部脚本，可能(1)都不会被执行。
    2006-07-07
  • 详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案

    详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案

    这篇文章主要介绍了详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • js 将图片连接转换成base64格式的简单实例

    js 将图片连接转换成base64格式的简单实例

    下面小编就为大家带来一篇js 将图片连接转换成base64格式的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 原生JS实现非常好看的计数器

    原生JS实现非常好看的计数器

    这篇文章主要为大家详细介绍了原生JS实现非常好看的计数器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • JavaScript 悬浮窗口实现代码

    JavaScript 悬浮窗口实现代码

    主要是window.onscroll的运用
    2009-02-02
  • 分享经典的JavaScript开发技巧

    分享经典的JavaScript开发技巧

    这篇文章向大家分享了40多个经典的JavaScript开发技巧，相信读完这篇文章对大家开发javascript有很大的帮助作用，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • ES6解构赋值实例详解

    ES6解构赋值实例详解

    这篇文章主要介绍了ES6解构赋值,结合实例形式较为详细的分析了ES6结构赋值的基本概念、原理与使用方法,需要的朋友可以参考下
    2017-10-10

最新评论