微信小程序手动获取图片真实宽高自适应

方法一

1、视图

<image src='' bindload="imageLoad" style="width:{{imgwidth}}rpx; height:{{imgheight }}rpx;"></image>

2.1、在data中定义宽高

  data:{
    imgwidth: 0,
    imgheight: 0,
  }

2.2、和onLoad同级方法

imageLoad: function(e) {
    var $width = e.detail.width; //获取图片真实宽度
    var $height = e.detail.height; //获取图片真实高度
    this.setData({
      imgwidth: $width,
      imgheight: $height
    })
  },

方法二

微信小程序image组件

蒙层居中：

1、视图

<view catchtouchmove='move' class='mongolia'>
  <view class='popup'>
  </view>
</view>

2、样式

.mongolia {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 99999;
}

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  max-height: 100%;
  /* background-color: #fff; */
  transform: translate3d(-50%, -50%, 0);
  z-index: 999999;
  width: 100%;
  text-align: center;
}

蒙层显示时候，底部不可以滚动

move: function() {},

<view  catchtouchmove="return">
  <view  catchtouchmove="return"></view>
  <view> // 有需要滚动的列表不要加 catchtouchmove="return", 否则列表无法滚动
      <view>滚动列表</view>
  </view>
</view>

vue的pc端
（1）获取图片的实际大小

getImageInfo(url, callback) {
   var img = new Image();
   img.src = url;
   if(img.complete) {
    // 如果图片被缓存，则直接返回缓存数据
    callback(img.width, img.height);
   } else {
    img.onload = function() {
     callback(img.width, img.height);
    }
   }
},

（2）调用

this.getImageInfo(url, function(width, height) {
    // 在这里面使用
    console.log(width);
    console.log(height);
})