vue preview图片宽高旋转 vue-preview动态获取图片宽高并增加旋转功能的实现

import VuePreview from 'vue-preview'
Vue.use(VuePreview)
Vue.use(preview, {
 mainClass: 'pswp--minimal--dark',
 barsSize: {top: 0, bottom: 0},
 captionEl: false,
 fullscreenEl: false,
 shareEl: false,
 bgOpacity: 0.85,
 tapToClose: true,
 tapToToggleControls: false
})

// 定义预览图片列表
previewlist: [
  {
    src: ‘./pic01.jpg',
    w: 1200,
    h: 900
  },
  {
    src: ‘./pic01.jpg',
    w: 1200,
    h: 900
  }
]
 
// 给图片添加“preview-img”类(必须添加且要同名)，以及绑定“show”方法
<img :src="decodeURIComponent(item.name)" class="preview-img" @click="show(index)">
 
// 点击图片触发预览方法
show (index) {
  this.$preview.open(index, this. previewlist);
}

this. previewlist = []; //查看列表
let imglist = […]; //从服务器获取的图片地址列表
show (index) {
  for (let i = 0; i < imglist.length; i++) {
    // 获取图片实际大小
    let newImage = {};
    let img = new Image();
    img.src = imglist[i];
    img.onload = function () {
      newImage.src = imglist[i];
      newImage.w = img.width;
      newImage.h = img.height;
    };
    this.previewlist.push(newImage);
  }
  // 正常情况下javascript都是按照顺序执行的。但是我们可能让该语句后面的语句执行完再执行本身，用setTimeout延时0ms来实现。
  setTimeout(() => {
    this.$preview.open(index, this.previewlist);
  }, 0);
}

.pswp__button--rotate {
 background-position: -176px 0;
}

imgRotateFn () {
   this.angle+=90;
   let imgNode = document.getElementsByClassName('pswp__img');
   for (let i = 0; i<imgNode.length; i++) {
      imgNode[i].style.WebkitTransform = 'rotate('+this.angle+'deg)';
   }
 }