新手跳坑指南《四十二》图片显示不全

2017-01-10

直入主题: 对于一张网络图片高度太高,而显示不全如何解决?


其实我一贯的观点是,所有的问题从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:


<image style="width: {{imageWidth}}px; height: {{imageHeight}}px;" src="{{imgurl}}"  mode="aspectFill" bindload="<span style="color:#FF0000;"><strong>imgload</strong></span>"></image>



JS:


Page({ 

  data:{ 

    imgurl:'http://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}

接下来是如何显示的问题:

    如果图片宽度大于屏幕宽度,则显示屏幕宽度大小,此时图片高度需要等比例压缩;

    如果图片宽度小于等于屏幕宽度,则正常显示图片宽高。

以下方法是根据屏幕宽度比较宽度大小,从而计算显示的高宽:


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;  

  }




如上,大功告成了




0
收藏