今天小编为大家带来的是微信小程序中如何实现图片等比例缩放的教程，一定还有很多用户是不了解在小程序中缩放图片吧？那么，快点点击查看下面具体内容吧。
老规矩,先上图.
1.图片高宽比小于屏幕高宽比
2.图片高宽比大于屏幕高宽比
3.这种其实也是图片高宽比小于屏幕高宽比,但是高宽都大于屏幕高宽.所以不能简单用高宽来判断,应该是用高宽比判断后做缩放.
上代码：
1.index.wxml
1.
2.
3.
4.
5.
6.
7.
8.
2.index.js1.//index.js
2.//获取应用实例
3.var imageUtil = require（'//utils/util.js'）；
4.var app = getApp（）
5.Page（{
6. data: {
7. imagefirstsrc: 'http://bpic.588ku.com/back_pic/00/03/85/1656205138bbe2d.png',//图片链接
8. imagesecondsrc: 'http://bpic.588ku.com/back_pic/04/07/63/28581203949ca9d.jpg!/fw/400/quality/90/unsharp/true/compress/true',//图片链接
9. imagethirdsrc:'http://img1.gtimg.com/ent/pics/hv1/13/71/2061/134034643.jpg',
10. imagewidth: 0,//缩放后的宽
11. imageheight: 0,//缩放后的高
12.
13. },
14. onLoad: function （） {
15. },
16. imageLoad: function （e） {
17. var imageSize = imageUtil.imageUtil（e）
18. this.setData（{
19. imagewidth: imageSize.imageWidth,
20. imageheight: imageSize.imageHeight
21. }）
22. }
23.}）
3.util.js
1.//util.js
2.function imageUtil（e） {
3. var imageSize = {};
4. var originalWidth = e.detail.width;//图片原始宽
5. var originalHeight = e.detail.height;//图片原始高
6. var originalScale = originalHeight/originalWidth;//图片高宽比
7. console.log（'originalWidth: ' + originalWidth）
8. console.log（'originalHeight: ' + originalHeight）
9. //获取屏幕宽高
10. wx.getSystemInfo（{
11. success: function （res） {
12. var windowWidth = res.windowWidth;
13. var windowHeight = res.windowHeight;
14. var windowscale = windowHeight/windowWidth;//屏幕高宽比
15. console.log（'windowWidth: ' + windowWidth）
16. console.log（'windowHeight: ' + windowHeight）
17. if（originalScale < windowscale）{//图片高宽比小于屏幕高宽比
18. //图片缩放后的宽为屏幕宽
19. imageSize.imageWidth = windowWidth;
20. imageSize.imageHeight = （windowWidth * originalHeight） / originalWidth;
21. }else{//图片高宽比大于屏幕高宽比
22. //图片缩放后的高为屏幕高
23. imageSize.imageHeight = windowHeight;
24. imageSize.imageWidth = （windowHeight * originalWidth） / originalHeight;
25. }
26.
27. }
28. }）
29. console.log（'缩放后的宽： ' + imageSize.imageWidth）
30. console.log（'缩放后的高： ' + imageSize.imageHeight）
31. return imageSize;
32.}
33.
34.module.exports = {
35. imageUtil: imageUtil
36.}
以上就是关于“微信小程序图片等比例缩放教程”的内容，想要第一时间掌握最新的资讯？那么关注未来软件园是个不错的选择，小编每天为你带来精彩不断！