WxAutoImage

微信小程序中的图片自适应宽高的计算类

MIT License

Stars
34

WxAutoImage

mode 320240.

imagebindload

imagebindload

** 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){//widthwidth
          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.imagestyle
<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));
  }
})