有话说
如果你已经看过一段时间的微信小程序后，你会发现，小程序中的图片虽然给了很多种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
多谢反馈，我会很快放出更新版。