WeChat applet image scaling-Mini Program Development-php.cn

WeChat applet image scaling

不言

Release： 2018-06-23 14:59:15

Original

10449 people have browsed it

This article mainly introduces the relevant information on WeChat mini program image scaling (picture adaptive screen). Friends in need can refer to

WeChat mini program image scaling

I saw someone writing an article on the forum about equal scaling of images this morning. They just judged whether the image width was greater than the screen width. I also encountered the issue of equal scaling of images when I was working on Android. Question. You should use the picture aspect ratio and the screen aspect ratio to make a judgment. Make a note.

Old rule, upload the picture first.

1 .The picture aspect ratio is smaller than the screen aspect ratio

2.The picture aspect ratio is larger than the screen aspect ratio

3. This is actually the aspect ratio of the picture that is smaller than the screen aspect ratio, but the height and width are both greater than the screen height and width. So you cannot simply use the height and width to judge. It should be scaled after judging the aspect ratio.

The code above:

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>-->

Copy after login

2.index.js

//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 
  }) 
 } 
})

Copy after login

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 < windowscale){//图片高宽比小于屏幕高宽比 
    //图片缩放后的宽为屏幕宽 
     imageSize.imageWidth = windowWidth; 
     imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth; 
   }else{//图片高宽比大于屏幕高宽比 
    //图片缩放后的高为屏幕高 
     imageSize.imageHeight = windowHeight; 
     imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight; 
   } 
    
  } 
 }) 
 console.log(&#39;缩放后的宽: &#39; + imageSize.imageWidth) 
 console.log(&#39;缩放后的高: &#39; + imageSize.imageHeight) 
 return imageSize; 
} 
 
module.exports = { 
 imageUtil: imageUtil 
}

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the code for WeChat applet to upload pictures to the server

WeChat applet implements click-button modification Function of font color

The above is the detailed content of WeChat applet image scaling. For more information, please follow other related articles on the PHP Chinese website!