微信小程序图片 等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度_微信小程序获取图片的高度

1.新建一个ImgUtils.js

class ImgUtils {

  /***
   * 按照显示图片的宽等比例缩放得到显示图片的高
   * @params originalWidth  原始图片的宽
   * @params originalHeight 原始图片的高
   * @params imageWidth     显示图片的宽，如果不传就使用屏幕的宽
   * 返回图片的宽高对象
  ***/
  static imageZoomHeightUtil(originalWidth, originalHeight, imageWidth) {
    let imageSize = {};
    if (imageWidth) {
      imageSize.imageWidth = imageWidth;
      imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth;
    } else {//如果没有传imageWidth,使用屏幕的宽
      wx.getSystemInfo({
        success: function (res) {
          imageWidth = res.windowWidth;
          imageSize.imageWidth = imageWidth;
          imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth;
        }
      });
    }
    return imageSize;
  }

  /***
   * 按照显示图片的高等比例缩放得到显示图片的宽
   * @params originalWidth  原始图片的宽
   * @params originalHeight 原始图片的高
   * @params imageHeight    显示图片的高，如果不传就使用屏幕的高
   * 返回图片的宽高对象
  ***/
  static imageZoomWidthUtil(originalWidth, originalHeight, imageHeight) {
    let imageSize = {};
    if (imageHeight) {
      imageSize.imageWidth = (imageHeight * originalWidth) / originalHeight;
      imageSize.imageHeight = imageHeight;
    } else {//如果没有传imageHeight,使用屏幕的高
      wx.getSystemInfo({
        success: function (res) {
          imageHeight = res.windowHeight;
          imageSize.imageWidth = (imageHeight * originalWidth) / originalHeight;
          imageSize.imageHeight = imageHeight;
        }
      });
    }
    return imageSize;
  }

}

export default ImgUtils;
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
41
42
43
44
45
46
47
48
49
50
51
52
53

2.使用image组件加载图片

<image class="demandsquare_item_contxt_image" src="{{onepic}}" style="width:{{onepicwidth}}px;height:{{onepicheight}}px;"></image>
1

3.当前页面的js

// pages/demandsquare/demandsquare.js
import Util from '../../utils/Imgutils.js';
Page({

  /**
   * 页面的初始数据
   */
  data: {
    onepic: 'https://xxxxx/images/1.jpg',
    onepicwidth: 0,
    onepicheight: 0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this;
    wx.getImageInfo({
      src: that.data.onepic,
      success: function(res) {
        console.log(res.width)
        console.log(res.height)
        //获取图片的原始宽度和高度
        let originalWidth = res.width;
        let originalHeight = res.height;
        let imageSize = Util.imageZoomWidthUtil(originalWidth, originalHeight, 145);
        that.setData({
          onepicwidth: imageSize.imageWidth,
          onepicheight: imageSize.imageHeight
        });
      }
    })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  },
})
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85