小程序------圖片自適應寬高的計算類

官方說明： 當圖片載入完畢時，發布到 AppService 的事件名，事件對象event.detail = {height:'圖片高度px', width:'圖片寬度px'}

⚠️： 這里的height:'圖片高度px', width:'圖片寬度px'都是原始寬高，這就給了我們可以計算的余地

• 思路
  
  
  • 獲取圖片原始寬高
  • 獲取系統屏寬
  • 以原始寬與系統屏寬對比大小，以大者為基准縮放
• 實現函數

  我在主要函數中，加入了少量注釋。

/***
* wxAutoImageCal 計算寬高
* 
* 參數 e: iamge load函數的取得的值
* 返回計算后的圖片寬高
* {
*  imageWidth: 100px;
*  imageHeight: 100px;
* }
*/
function wxAutoImageCal(e){
    console.dir(e);
    //獲取圖片的原始長寬
    var originalWidth = e.detail.width;
    var originalHeight = e.detail.height;
    var windowWidth = 0,windowHeight = 0;
    var autoWidth = 0,autoHeight = 0;
    var results= {};
    wx.getSystemInfo({
      success: function(res) {
        console.dir(res);
        windowWidth = res.windowWidth;
        windowHeight = res.windowHeight;
        //判斷按照那種方式進行縮放
        console.log("windowWidth"+windowWidth);
        if(originalWidth > windowWidth){//在圖片width大於手機屏幕width時候
          autoWidth = windowWidth;
          console.log("autoWidth"+autoWidth);
          autoHeight = (autoWidth*originalHeight)/originalWidth;
          console.log("autoHeight"+autoHeight);
          results.imageWidth = autoWidth;
          results.imageheight = autoHeight;
        }else{//否則展示原來的數據
          results.imageWidth = originalWidth;
          results.imageheight = originalHeight;
        }
      }
    })

    return results;

  }

使用

• 1.在image屬性綁定函數和動態style

<image bindload="cusImageLoad" src="https://dn-cnode.qbox.me/FjfPMJYFAbyV1-OM-CcCC5Wk2tmY" style="width:{{imageWidth}}px;height:{{imageheight}}px"/>

2.在load函數中引入計算

//index.js
//獲取應用實例
var WxAutoImage = require('../../WxAutoImage/WxAutoImage.js');
var app = getApp()
Page({
  data: {

  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
  },
  cusImageLoad: function (e){
    var that = this;
    //這里看你在wxml中綁定的數據格式 單獨取出自己綁定即可
    that.setData(WxAutoImage.wxAutoImageCal(e));
  }
})

目前這種操作比較負責，暫時沒有想到多圖片的解決方案。

微信小程序中的圖片自適應寬高的計算類     http://bbs.zhichiwangluo.com/forum.php?mod=viewthread&tid=11630