直入主题： 对于一张网络图片高度太高，而显示不全如何解决？
其实我一贯的观点是，所有的问题从api中都能够找到答案，只是有时候缺少耐
心，而没有好好去读官方api,出现问题后着急的google、百度、github... 下面我们来看下api 怎么说的：
image
图片。
| 属性名 | 类型 | 默认值 | 说明 |
| src | String | 图片资源地址 | |
| mode | String | 'scaleToFill' | 图片裁剪、缩放的模式 |
| binderror | HandleEvent | 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'} | |
| bindload | HandleEvent | 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'} |
注：image组件默认宽度300px、高度225px
mode有12种模式，其中3种是缩放模式，9种是裁剪模式。
特别注意：“注”的位置 说了，如果image标签不写宽高属性，则默认显示宽度300px、高度225px。所以如下方法就可以在图片下载成功后拿到图片的宽高属性值了，如下：
WXML:
[AppleScript]- <image style="width: {{imageWidth}}px; height: {{imageHeight}}px;" src="{{imgurl}}" mode="aspectFill" bindload="<span style="color:#FF0000;"><strong>imgload</strong></span>"></image>
JS:
[AppleScript]- Page({
- data:{
- imgurl:'https://hukang02.b0.upaiyun.com/1480321452672.jpg',
- imageWidth:0,
- imageHeight:0
- },
- <span style="color:#CC0000;"><strong>imgload</strong></span>: function(e){
- console.log("图片加载完成="+e.detail);
- //用来计算高宽
- this.setData(wxAutoImageCal(e));
- }
- })
上面方法就可以得到图片的高宽
打印的数据是：{width:720,height:1546}
接下来是如何显示的问题:
如果图片宽度大于屏幕宽度，则显示屏幕宽度大小，此时图片高度需要等比例压缩；
如果图片宽度小于等于屏幕宽度，则正常显示图片宽高。
以下方法是根据屏幕宽度比较宽度大小，从而计算显示的高宽：
[AppleScript]- function wxAutoImageCal(e){
- //获取图片的原始长宽
- var originalWidth = e.detail.width;
- var originalHeight = e.detail.height;
- var windowWidth = 0,windowHeight = 0;
- var imageWidth= 0,imageHeight= 0;
- var results= {};
- //获取屏幕信息
- wx.getSystemInfo({
- success: function(res) {
- windowWidth = res.windowWidth;
- windowHeight = res.windowHeight;
- //判断按照那种方式进行缩放
- if(originalWidth > windowWidth){//在图片width大于手机屏幕width时候
- imageWidth= windowWidth;
- imageHeight= (imageWidth*originalHeight)/originalWidth;
- results.imageWidth= imageWidth;
- results.imageHeight= imageHeight;
- }else{//否则展示原来的数据
- results.imageWidth= originalWidth;
- results.imageHeight= originalHeight;
- }
- }
- })
- return results;
- }
如上，大功告成了
