怎么在微信小程序中獲取圖片的寬度與高度

這篇文章給大家介紹怎么在微信小程序中獲取圖片的寬度與高度，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

重點: 在圖片加載完成后獲取對應的圖片信息.

經查小程序開發文檔后發現, 有提供加載成功的回調, 如下:

演示Demo如下:

// wxml
<view  >
 <image src="https://sf3-ttcdn-tos.pstatp.com/img/mosaic-legacy/3796/2975850990~300x300.image" bindload="loadSuccess" ></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  >
 <image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba1f75f0d29c40759b43ef910dacb4e7~tplv-k3u1fbpfcp-watermark.image" mode="widthFix"></image>
</view>

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

看看750x110的效果圖:

再看看750x480的效果圖:

關于怎么在微信小程序中獲取圖片的寬度與高度就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。