微信小程序图片加载

微信小程序里面显示图片会用到 image 组件,该组件默认宽度300px、高度225px,使用时需要自己设置宽度 width、高度 height 以及图片资源地址 src。当图片资源为本地图片时,可以先查看其宽高,再设置为 image 的 width 和 height,但是当图片是从网络上加载,并不能提前确定其宽高时,需要考虑怎样才能使其自动适应宽高,并按期望显示。

image 有一个 mode 属性,该属性有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式:

缩放模式:
scaleToFill    不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
aspectFit    保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
aspectFill    保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix    宽度不变,高度自动变化,保持原图宽高比不变

裁剪模式:
top    不缩放图片,只显示图片的顶部区域
bottom    不缩放图片,只显示图片的底部区域
center    不缩放图片,只显示图片的中间区域
left    不缩放图片,只显示图片的左边区域
right    不缩放图片,只显示图片的右边区域
top left    不缩放图片,只显示图片的左上边区域
top right    不缩放图片,只显示图片的右上边区域
bottom left    不缩放图片,只显示图片的左下边区域
bottom right    不缩放图片,只显示图片的右下边区域        

一般情况下从网络上加载图片时,由于图片的尺寸未知,为了防止图片过宽或过长,因此不会完全按照图片的尺寸设置宽高,而是给定一个最大的宽度和高度,目标是将图片按照原始比例并在合适的可视范围内显示。
首先为 image 的 bindload 属性绑定一个方法,该方法会在图片加载完成时调用,从而获取图片尺寸,当图片尺寸获取到后,根据最大宽高计算最终的尺寸,并保存在 data 中定义的数据中,之后在 image 中通过 style 属性将 width 和 height 设置为保存的数据即可。另外由于图片可能加载失败,那么可以绑定binderror属性,在加载失败时设置 width 和 height,避免 image 的尺寸不符合预期,也可以在 data 中设置期望的加载失败时的宽高。代码如下:

<image src="{{pic}}" style="width:{{picSize.width}}rpx;height:{{picSize.height}}rpx;" bindload="imageLoad" />
Page({
  data: {
    picSize: { "width": 320, "height": 320}
  },
  imageLoad: function (e) {
    var maxSize = 320;
    var imgWidth = e.detail.width;
    var imgHeight = e.detail.height;
    var ratio = imgWidth / imgHeight;
    var picSize;
    if (imgWidth >= imgHeight && imgWidth > maxSize) {
      // 如果是宽图并且宽度超过最大宽度,则以最大宽度作为最终宽度并按原始比例计算高度
      picSize = { "width": maxSize, "height": maxSize/ ratio };
    } else if (imgHeight > imgWidth && imgHeight > maxSize) {
      // 如果是长图并且高度超过最大高度,则以最大高度作为最终高度并按原始比例计算宽度
      picSize = { "width": maxSize* ratio, "height": maxSize};
    } else {
      // 如果宽高都在最大限度之内则最终宽高为图片的原始尺寸
      picSize = { "width": imgWidth, "height": imgHeight };
    }
    this.setData({
      picSize: picSize
    })
  }
})

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,922评论 1 87
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 649评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 706评论 0 9
  • 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人...
    珍此良辰阅读 14,529评论 16 16
  • 翻译自“Auto Layout Guide”。 2 自动布局细则手册 2.1 堆栈视图 接下来的章节展示了如何使用...
    lakerszhy阅读 710评论 3 8