亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序 圖片等比例縮放（圖片自適應(yīng)屏幕）

 更新時(shí)間：2016年11月16日 09:34:45   作者：dzp_coder  
這篇文章主要介紹了微信小程序 圖片等比例縮放（圖片自適應(yīng)屏幕）的相關(guān)資料,需要的朋友可以參考下

微信小程序 圖片等比例縮放

早上在論壇上看到有人寫了關(guān)于圖片等比例縮放的文章,只是判斷了圖片寬是否大于屏幕寬.我之前在做Android的時(shí)候也會(huì)遇到圖片等比例縮放的問題.應(yīng)該是用圖片寬高比和屏幕寬高比做判斷.做個(gè)筆記.

老規(guī)矩,先上圖.

1.圖片高寬比小于屏幕高寬比


2.圖片高寬比大于屏幕高寬比


3.這種其實(shí)也是圖片高寬比小于屏幕高寬比,但是高寬都大于屏幕高寬.所以不能簡(jiǎn)單用高寬來判斷,應(yīng)該是用高寬比判斷后做縮放.


上代碼:

1.index.wxml

<!--index.wxml--> 
<!--圖片寬大于屏幕寬--> 
<image style="width: {{imagewidth}}px; height: {{imageheight}}px;" src="{{imagefirstsrc}}" bindload="imageLoad"></image> 
<!--圖片高大于屏幕高--> 
<!--<image style="width: {{imagewidth}}px; height: {{imageheight}}px;" src="{{imagesecondsrc}}" bindload="imageLoad"></image>--> 
<!--圖片寬高大于屏幕寬高--> 
<!--<image style="width: {{imagewidth}}px; height: {{imageheight}}px;" src="{{imagethirdsrc}}" bindload="imageLoad"></image>-->

2.index.js


//index.js 
//獲取應(yīng)用實(shí)例 
var imageUtil = require('../../utils/util.js'); 
var app = getApp() 
Page({ 
 data: { 
  imagefirstsrc: 'http://bpic.588ku.com/back_pic/00/03/85/1656205138bbe2d.png',//圖片鏈接 
  imagesecondsrc: 'http://bpic.588ku.com/back_pic/04/07/63/28581203949ca9d.jpg!/fw/400/quality/90/unsharp/true/compress/true',//圖片鏈接 
  imagethirdsrc:'http://img1.gtimg.com/ent/pics/hv1/13/71/2061/134034643.jpg', 
  imagewidth: 0,//縮放后的寬 
  imageheight: 0,//縮放后的高 
 
 }, 
 onLoad: function () { 
 }, 
 imageLoad: function (e) { 
  var imageSize = imageUtil.imageUtil(e) 
  this.setData({ 
   imagewidth: imageSize.imageWidth, 
   imageheight: imageSize.imageHeight 
  }) 
 } 
})

3.util.js

//util.js 
function imageUtil(e) { 
 var imageSize = {}; 
 var originalWidth = e.detail.width;//圖片原始寬 
 var originalHeight = e.detail.height;//圖片原始高 
 var originalScale = originalHeight/originalWidth;//圖片高寬比 
 console.log('originalWidth: ' + originalWidth) 
 console.log('originalHeight: ' + originalHeight) 
 //獲取屏幕寬高 
 wx.getSystemInfo({ 
  success: function (res) { 
   var windowWidth = res.windowWidth; 
   var windowHeight = res.windowHeight; 
   var windowscale = windowHeight/windowWidth;//屏幕高寬比 
   console.log('windowWidth: ' + windowWidth) 
   console.log('windowHeight: ' + windowHeight) 
   if(originalScale < windowscale){//圖片高寬比小于屏幕高寬比 
    //圖片縮放后的寬為屏幕寬 
     imageSize.imageWidth = windowWidth; 
     imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth; 
   }else{//圖片高寬比大于屏幕高寬比 
    //圖片縮放后的高為屏幕高 
     imageSize.imageHeight = windowHeight; 
     imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight; 
   } 
    
  } 
 }) 
 console.log('縮放后的寬: ' + imageSize.imageWidth) 
 console.log('縮放后的高: ' + imageSize.imageHeight) 
 return imageSize; 
} 
 
module.exports = { 
 imageUtil: imageUtil 
}

相關(guān)文章

最新評(píng)論