有话说
如果你已经看过一段时间的微信小程序后,你会发现,小程序中的图片虽然给了很多种mode,但是在你使用过程中,会出现很尴尬的问题。
比如: 图片很高,但是在显示的时候,只能看到小的缩略图,且如不指定宽高,则在默认渲染中,则宽高都为320,240.
在视觉设计上会有一定的麻烦。
在实际开发中,也有很多人问过我这个问题,今天说一下单图片的适配,多图片我目前还没有找到合适的处理方案,等有了再说。
简单的github库
https://github.com/icindy/WxAutoImage13
通过image的bindload来计算自适应宽高
微信小程序中image暴漏的函数比较少,但是bindload十分有用。
官方说明: 当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}
这里的height:'图片高度px', width:'图片宽度px'都是原始宽高,这就给了我们可以计算的余地
思路
获取图片原始宽高
获取系统屏宽
以原始宽与系统屏宽对比大小,以大者为基准缩放
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
| /***
| * wxAutoImageCal 计算宽高实现函数,我在主要函数中,加入了少量注释。
| *
| * 参数 e: iamge load函数的取得的值
| * 返回计算后的图片宽高
| * {
| * imageWidth: 100px;
| * imageHeight: 100px;
| * }
| */
| function wxAutoImageCal(e) {
| console.dir(e); //获取图片的原始长宽
| var originalWidth = e.detail.width;
| var originalHeight = e.detail.height;
| var windowWidth = 0,
| windowHeight = 0;
| var autoWidth = 0,
| autoHeight = 0;
| var results = {};
| wx.getSystemInfo({
| success: function(res) {
| console.dir(res);
| windowWidth = res.windowWidth;
| windowHeight = res.windowHeight; //判断按照那种方式进行缩放
| console.log("windowWidth" + windowWidth);
| if (originalWidth > windowWidth) { //在图片width大于手机屏幕width时候
| autoWidth = windowWidth;
| console.log("autoWidth" + autoWidth);
| autoHeight = (autoWidth * originalHeight) / originalWidth;
| console.log("autoHeight" + autoHeight);
| results.imageWidth = autoWidth;
| results.imageheight = autoHeight;
| } else { //否则展示原来的数据
| results.imageWidth = originalWidth;
| results.imageheight = originalHeight;
| }
| }
| }) return results;
|
| } |
|
使用
| <image bindload="cusImageLoad" src="https://dn-cnode.qbox.me/FjfPMJYFAbyV1-OM-CcCC5Wk2tmY" style="width:{{imageWidth}}px;height:{{imageheight}}px"/> |
|
| //index.js
| //获取应用实例
| var WxAutoImage = require('../../WxAutoImage/WxAutoImage.js');
| var app = getApp();
| Page({
| data: {
|
| },
| onLoad: function() {
| console.log('onLoad') var that = this
| },
| cusImageLoad: function(e) {
| var that = this; //这里看你在wxml中绑定的数据格式 单独取出自己绑定即可
| that.setData(WxAutoImage.wxAutoImageCal(e));
| }
| }) |
|
问题
目前这种操作比较负责,暂时没有想到多图片的解决方案,希望有更好的解决方案的朋友指正批评。
这样计算有问题.图片宽高相等,都大于屏幕宽高的时候就出问题了. 多交流http://blog.csdn.net/qq_31383345/article/details/53127804
多谢反馈,我会很快放出更新版。