小程序图片显示

对于一张网络图片高度太高，而显示不全如何解决？

微信小程序 image api

注：image 组件默认宽度 300px、高度 225px

mode 有效值：

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

WXML:

   <image style="width: {{imageWidth}}px; height: {{imageHeight}}px;"  src="{{imgurl}}"  mode="aspectFill"  bindload="imgload">
   </image>
​

JS:

  Page({ 
  data:{ 
	imgurl:'http://hukang02.b0.upaiyun.com/1480321452672.jpg', 
	imageWidth:0, 
	imageHeight:0  
 }, 
  imgload: function(e){ 
	console.log("图片加载完成="+e.detail);  
	//用来计算高宽  
	this.setData(wxAutoImageCal(e));  
 } 
})
​

计算宽高显示:

function wxAutoImageCal(e){ 
  //获取图片的原始长宽  
  var originalWidth = e.detail.width;  
  var originalHeight = e.detail.height;  
  var windowWidth = 0,windowHeight = 0;  
  var imageWidth= 0,imageHeight= 0;  
  var results= {};  
 //获取屏幕信息  
  wx.getSystemInfo({ 
	  success: function(res) { 
		windowWidth = res.windowWidth;  
		windowHeight = res.windowHeight;  
		//判断按照那种方式进行缩放  
		if(originalWidth > windowWidth){//在图片width大于手机屏幕width时候  
		  imageWidth= windowWidth;  
		  imageHeight= (imageWidth*originalHeight)/originalWidth;  
		  results.imageWidth= imageWidth;  
		  results.imageHeight= imageHeight;  
		}else{//否则展示原来的数据  
		  results.imageWidth= originalWidth;  
		  results.imageHeight= originalHeight;  
		} 
	  } 
	}) 
	return results;  
  } 
​