小程序獲取圖片寬高的方法
2020-09-27|HiShop
導(dǎo)讀：小程序如果不能獲取圖片寬高，那么圖片設(shè)置寬高時(shí)，就有可能會(huì)出現(xiàn)圖片變形，要想避免這種情況，除了圖片等比例縮放，還可以用image組件加載圖片，通過bindload動(dòng)態(tài)的獲取圖片的高...
小程序如果不能獲取圖片寬高，那么圖片設(shè)置寬高時(shí)，就有可能會(huì)出現(xiàn)圖片變形，要想避免這種情況，除了圖片等比例縮放，還可以用image組件加載圖片，通過bindload動(dòng)態(tài)的獲取圖片的高度和寬度，下面是方法：
index.wxml (../pro.png是本地圖片)
<image bindload="imageLoad" style="width:{{imageWidth}}px;;height:{{imageHeight}}px;" src="../pro.png"/>
index.js
import Util from '../common/Util';
Page({
data:{
imageWidth:0,
imageHeight:0
},
imageLoad: function (e) {
//獲取圖片的原始寬度和高度
let originalWidth = e.detail.width;
let originalHeight = e.detail.height;
//let imageSize = Util.imageZoomHeightUtil(originalWidth,originalHeight);
//let imageSize = Util.imageZoomHeightUtil(originalWidth,originalHeight,375);
let imageSize = Util.imageZoomWidthUtil(originalWidth,originalHeight,145);
this.setData({imageWidth:imageSize.imageWidth,imageHeight:imageSize.imageHeight});
}
})
HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。
更多小程序開發(fā)案例，盡在：http://www.gstsqh.com.cn/xiaocx/kaifa.html
小程序顯示圖片相關(guān)文章：
小程序加載圖片如何實(shí)現(xiàn)
小程序開發(fā)上傳圖片如何實(shí)現(xiàn)
小程序上傳圖片組件及上傳多張圖片
- 關(guān)注官方公眾號(hào) -
提供多種電商軟件及解決方案