微信小程序中的图片自适应宽高的计算类

zhichi_admin

如果你已经看过一段时间的微信小程序后，你会发现，小程序中的图片虽然给了很多种mode，但是在你使用过程中，会出现很尴尬的问题。 比如： 图片很高，但是在显示的时候，只能看到小的缩略图，且如不指定宽高，则在默认渲染中，则宽高都为320，240.
在视觉设计上会有一定的麻烦。
在实际开发中，也有很多人问过我这个问题，今天说一下单图片的适配，多图片我目前还没有找到合适的处理方案，等有了再说。
通过image的bindload来计算自适应宽高

微信小程序中image暴漏的函数比较少，但是bindload十分有用。

官方说明： 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

⚠️： 这里的height:'图片高度px', width:'图片宽度px'都是原始宽高，这就给了我们可以计算的余地

• 思路
  
  
  • 获取图片原始宽高
  • 获取系统屏宽
  • 以原始宽与系统屏宽对比大小，以大者为基准缩放
    
• 实现函数

  我在主要函数中，加入了少量注释。

  
  

1. /***
   
2. * wxAutoImageCal 计算宽高
   
3. *
   
4. * 参数 e: iamge load函数的取得的值
   
5. * 返回计算后的图片宽高
   
6. * {
   
7. *  imageWidth: 100px;
   
8. *  imageHeight: 100px;
   
9. * }
   
10. */
    
11. function wxAutoImageCal(e){
    
12.     console.dir(e);
    
13.     //获取图片的原始长宽
    
14.     var originalWidth = e.detail.width;
    
15.     var originalHeight = e.detail.height;
    
16.     var windowWidth = 0,windowHeight = 0;
    
17.     var autoWidth = 0,autoHeight = 0;
    
18.     var results= {};
    
19.     wx.getSystemInfo({
    
20.       success: function(res) {
    
21.         console.dir(res);
    
22.         windowWidth = res.windowWidth;
    
23.         windowHeight = res.windowHeight;
    
24.         //判断按照那种方式进行缩放
    
25.         console.log("windowWidth"+windowWidth);
    
26.         if(originalWidth > windowWidth){//在图片width大于手机屏幕width时候
    
27.           autoWidth = windowWidth;
    
28.           console.log("autoWidth"+autoWidth);
    
29.           autoHeight = (autoWidth*originalHeight)/originalWidth;
    
30.           console.log("autoHeight"+autoHeight);
    
31.           results.imageWidth = autoWidth;
    
32.           results.imageheight = autoHeight;
    
33.         }else{//否则展示原来的数据
    
34.           results.imageWidth = originalWidth;
    
35.           results.imageheight = originalHeight;
    
36.         }
    
37.       }
    
38.     })
    
39. 
    
40.     return results;
    
41. 
    
42.   }

复制代码

使用

• 1.在image属性绑定函数和动态style
  1. <image bindload="cusImageLoad" src="https://dn-cnode.qbox.me/FjfPMJYFAbyV1-OM-CcCC5Wk2tmY" style="width:{{imageWidth}}px;height:{{imageheight}}px"/>
     

  复制代码
  
  

• 2.在load函数中引入计算
  

1. //index.js
   
2. //获取应用实例
   
3. var WxAutoImage = require('../../WxAutoImage/WxAutoImage.js');
   
4. var app = getApp()
   
5. Page({
   
6.   data: {
   
7. 
   
8.   },
   
9.   onLoad: function () {
   
10.     console.log('onLoad')
    
11.     var that = this
    
12.   },
    
13.   cusImageLoad: function (e){
    
14.     var that = this;
    
15.     //这里看你在wxml中绑定的数据格式 单独取出自己绑定即可
    
16.     that.setData(WxAutoImage.wxAutoImageCal(e));
    
17.   }
    
18. })

复制代码

问题

目前这种操作比较负责，暂时没有想到多图片的解决方案。

希望有更好的解决方案的朋友指正批评。

游客，如果您要查看本帖隐藏内容请回复

营在路上

正需要，支持楼主大人了！

269442728

富文本字段里的图片如何做自适应！！！！

張揚

确实是难得好帖啊，顶先

Ywenli

dddddddddddddddddddddddd

卡米纳利

确实是难得好帖啊，顶先

红花贼

好帖，顶顶顶顶顶

我的小程序

好帖，顶顶顶顶顶

winbin5678

666666666666666666666666666666666666666666

arman1278745774

正需要，支持楼主大人了！