微信小程序中的图片自适应宽高的计算类
MIT License
mode
320240.
bindload
image
bindload
** 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;
}
<image bindload="cusImageLoad" src="https://dn-cnode.qbox.me/FjfPMJYFAbyV1-OM-CcCC5Wk2tmY" style="width:{{imageWidth}}px;height:{{imageheight}}px"/>
//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));
}
})