微信小程序图片等比例缩放

微信小程序 图片等比例缩放

早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏幕宽.我之前在做Android的时候也会遇到图片等比例缩放的问题.应该是用图片宽高比和屏幕宽高比做判断.做个笔记.

老规矩,先上图.

1.图片高宽比小于屏幕高宽比

 
 
 
 
 
 
//index.js 
//获取应用实例 
var imageUtil = require(&＃39;../../utils/util.js&＃39;); 
var app = getApp() 
Page({ 
 data: { 
  imagefirstsrc: &＃39;http://bpic.588ku.com/back_pic/00/03/85/1656205138bbe2d.png&＃39;,//图片链接 
  imagesecondsrc: &＃39;http://bpic.588ku.com/back_pic/04/07/63/28581203949ca9d.jpg!/fw/400/quality/90/unsharp/true/compress/true&＃39;,//图片链接 
  imagethirdsrc:&＃39;http://img1.gtimg.com/ent/pics/hv1/13/71/2061/134034643.jpg&＃39;, 
  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(&＃39;originalWidth: &＃39; + originalWidth) 
 console.log(&＃39;originalHeight: &＃39; + originalHeight) 
 //获取屏幕宽高 
 wx.getSystemInfo({ 
  success: function (res) { 
   var windowWidth = res.windowWidth; 
   var windowHeight = res.windowHeight; 
   var windowscale = windowHeight/windowWidth;//屏幕高宽比 
   console.log(&＃39;windowWidth: &＃39; + windowWidth) 
   console.log(&＃39;windowHeight: &＃39; + windowHeight) 
   if(originalScale 
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！