快捷導(dǎo)航

微信小程序如何獲取圖片寬度與高度

更新時(shí)間：2021年03月10日 11:36:28 作者：bug制造者

這篇文章主要給大家介紹了關(guān)于微信小程序如何獲取圖片寬度與高度的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

起源

最近在做A需求, 其中有個(gè)小功能點(diǎn)描述如下: 從配置端返回張圖片, 期望寬度不變(750)、高度根據(jù)圖片自適應(yīng).

我以為的

// 為便于講解, 將css作為style屬性綁定[實(shí)際不推薦]&& src的值先寫(xiě)死[后期改成接口返回的即可]
<view style="width:100%;">
 <image src="{{src}}"></image>
</view>

我一開(kāi)始想到的就是: 設(shè)置內(nèi)容區(qū)的width: 100%會(huì)自動(dòng)占滿(mǎn)屏幕寬度, 高度就會(huì)自適應(yīng).

實(shí)際效果: image占據(jù)空間為: 屏幕寬度 x 0

解決方案

核心: 解決如何獲取圖片的高度

初級(jí)方案

重點(diǎn): 在圖片加載完成后獲取對(duì)應(yīng)的圖片信息.

經(jīng)查小程序開(kāi)發(fā)文檔后發(fā)現(xiàn), 有提供加載成功的回調(diào), 如下:

演示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
 })
 }
})

先來(lái)看看效果:

思考個(gè)問(wèn)題: 假設(shè)我有100張圖片都需要做自適應(yīng), 那么是不是多了很多繁瑣的setData(), 同時(shí)也會(huì)導(dǎo)致性能問(wèn)題.

進(jìn)階方案

經(jīng)朋友提醒后發(fā)現(xiàn), 小程序image還有個(gè)屬性叫做mode, 可以去設(shè)置圖片的裁剪&縮放等形式.

關(guān)于mode屬性的取值可選項(xiàng)如下圖:

話(huà)不多說(shuō), 我們看看實(shí)際效果如何:

// 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的效果圖: