vue-preview動态擷取圖檔寬高并增加旋轉功能

vue-preview是一個常用的圖檔檢視器，微網誌網頁版就是用的這個插件：

我在項目中也用過這個插件，總體來說，還是比較滿意。但是缺少一個圖檔旋轉功能。

安裝使用

第一步：安裝

npm i vue-preview -S
           

第二步：引用配置

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);
}
           

新增圖檔旋轉功能

預設的功能有全屏、放大、分享、圖檔切換等，有時候我們還需要圖檔旋轉功能，怎麼辦呢？那隻能自己動手改插件了。

第一步：添加旋轉圖示

圖示檔案路徑：node_modules\photoswipe\dist\default-skin

原來隻有前面8個圖檔，後面那個稍微大一點的旋轉圖示是我加上去的，當然你也可以把尺寸設定為和原來的一樣。

第二步：添加旋轉按鈕到頁面

頁面檔案路徑：node_modules\vue-preview\src\plugins\preview\preview.vue

<button class="pswp__button pswp__button--rotate" title="旋轉" @click="imgRotateFn"></button>
           

第三步：添加旋轉按鈕的樣式

樣式檔案路徑：node_modules\photoswipe\dist\default-skin

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

第四步：實作旋轉方法

檔案路徑：node_modules\vue-preview\src\plugins\preview\preview.vue

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)';
      }
 }
           

這裡我隻貼出了關鍵代碼，需要你自己做浏覽器相容，以及切換圖檔時，應該将圖檔角度設定為0等。

測試結果

測試沒有問題，終于可以下班了，哈哈哈。

Tips：懶得自己動手改插件的夥伴，可以在樓主的GitHub倉庫下載下傳改好後的檔案，在你安裝好 vue-preview 後用“attachment”檔案夾中的三個檔案替換你項目中的對應檔案就擁有“旋轉”功能了。GitHub位址：https://github.com/xiongjun0812/vue-preview

今天就分享到這裡，有問題歡迎留言交流，或關注樓主微信公衆号：上班熊的環球夢。文中表述僅代表個人觀點，如果有更好的方法，歡迎分享。