微信小程序开发|教程|文档|资源汇总_即速论坛

 找回密码
 立即注册

扫一扫,访问微社区

查看: 17994|回复: 15

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

  [复制链接]

910

主题

2100

帖子

3万

金钱

管理员

论坛管理员

Rank: 9Rank: 9Rank: 9

积分
0

突出贡献优秀版主荣誉管理论坛元老

QQ
发表于 2016-11-16 11:28:54 | 显示全部楼层 |阅读模式
如果你已经看过一段时间的微信小程序后,你会发现,小程序中的图片虽然给了很多种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.     return results;

  40.   }
复制代码
使用
  • 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.   onLoad: function () {
  9.     console.log('onLoad')
  10.     var that = this
  11.   },
  12.   cusImageLoad: function (e){
  13.     var that = this;
  14.     //这里看你在wxml中绑定的数据格式 单独取出自己绑定即可
  15.     that.setData(WxAutoImage.wxAutoImageCal(e));
  16.   }
  17. })
复制代码

问题
目前这种操作比较负责,暂时没有想到多图片的解决方案。
希望有更好的解决方案的朋友指正批评。




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

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

0

主题

3

帖子

32

金钱

新人求带

Rank: 1

积分
0
发表于 2017-4-25 16:46:35 | 显示全部楼层
正需要,支持楼主大人了!

2

主题

7

帖子

107

金钱

新人求带

Rank: 1

积分
0
发表于 2017-5-13 12:07:32 | 显示全部楼层
富文本字段里的图片如何做自适应!!!!

1

主题

51

帖子

83

金钱

新人求带

Rank: 1

积分
0
发表于 2017-7-7 15:37:03 | 显示全部楼层
确实是难得好帖啊,顶先

0

主题

245

帖子

63

金钱

新人求带

Rank: 1

积分
0
发表于 2017-8-24 15:25:51 | 显示全部楼层
dddddddddddddddddddddddd

0

主题

98

帖子

0

金钱

新人求带

Rank: 1

积分
0
发表于 2018-4-5 08:43:25 | 显示全部楼层

确实是难得好帖啊,顶先

0

主题

2

帖子

24

金钱

新人求带

Rank: 1

积分
0
发表于 2018-4-8 15:54:06 | 显示全部楼层
好帖,顶顶顶顶顶

0

主题

41

帖子

50

金钱

新人求带

Rank: 1

积分
0
发表于 2018-4-16 18:16:07 | 显示全部楼层
好帖,顶顶顶顶顶

0

主题

9

帖子

72

金钱

新人求带

Rank: 1

积分
0
发表于 2018-5-15 17:52:02 | 显示全部楼层
666666666666666666666666666666666666666666

0

主题

9

帖子

80

金钱

新人求带

Rank: 1

积分
0
发表于 2018-7-17 10:14:39 | 显示全部楼层

正需要,支持楼主大人了!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|小黑屋|微信小程序开发|教程|文档|资源汇总_即速论坛 ( 粤ICP备14097199号-1  

GMT+8, 2022-10-3 09:16 , Processed in 0.097892 second(s), 37 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表