很多開發者在微信小程序的開發過程中都可能會遇到圖片失真的情況，因為微信小程序的image標簽要設置其寬高，不然圖片若寬高過大會撐開原始圖片大小的區域。我們經常會看到如下的圖示：
但是寬高設置固定了會導致有些圖片和規定顯示圖片大小的比例不一致而出現失真現象， 
為此，想到一個方法，當圖片加載成功的時候，會觸發bindload事件，通過這個事件我們可以獲取到圖片的寬高，那么問題就引刃而解了，我們可以把圖片原始的寬高獲取到，然后算出它的比例，根據需求固定圖片的寬(或高)，再根據比例來算出相應的高(或寬)，原理就是這樣，下面放代碼： 在utils中創建的一個js文件，暴露其接口imageLoad:
function imageLoad(e,zhi,img,or) {
var windowWidth=0;
wx.getSystemInfo({
success: function(res) {
console.log(1);
windowWidth=res.windowWidth;
}
})
var $width=e.detail.width, //獲取圖片真實寬度
$height=e.detail.height, //獲取圖片的真實高度
ratio=$width/$height; //圖片的真實寬高比例
// console.log(e);
if(or=='height'){
var viewWidth=zhi*ratio, //設置圖片顯示寬度
viewHeight=zhi;
if(viewWidth/2>windowWidth){
console.log("你的圖片已經超過屏幕寬度");
}
}else{
var viewWidth=zhi, //設置圖片顯示寬度
viewHeight=zhi/ratio;
}
var image=img;
//將圖片的datadata-index作為image對象的key,然后存儲圖片的寬高值
image[e.target.dataset.index]={
width:viewWidth,
height:viewHeight
}
return image;
}
module.exports = {
imageLoad: imageLoad
}并且在js中添加代碼：
var imgload = require('../../utils/imgload.js')
Page({
data: {
images:{}
},
//當圖片加載完成后會調用imageLoad函數
imageLoad:function(e){
var that=this;
//imageLoad(e,zhi,img,or)
//--e:圖片加載完成后觸發事件；zhi:你要固定的寬(高)的值，img:保存圖片的寬高值的變量，or:想要固定的寬(width),高(height)默認為固定寬
var imgs= imgload.imageLoad(e,200,this.data.images,'height')
this.setData({
images:imgs
});
},
onLoad:function(){
},
onReady: function () {
// 頁面渲染完成
},
})
在wxml中添加代碼：
<image wx:for="{{srcs}}" style="display:block;" src="{{ item }}" bindload="imageLoad" data-index="{{ index }}"
style="width:{{ images[index].width }}rpx; height:{{ images[index].height }}rpx;"></image>
不過這個方法有個缺點，有些人可能無法接受：
圖片必須價值完才顯示，所以會有延時
|
