Viewer.js 如何自訂義圖示及功能

前言

前陣子的專案中，用到了Viewer.js 這一個套件來顯示圖片

但客戶說要自訂義一個列印圖片的功能，故做了點小小的研究，就有了今天的這一篇~

Viewer.js

Viewer.js 是一套開源的套件，基本上來說就像是個相簿瀏覽的功能

功能面的話有放大縮小、換頁、左右旋轉、翻轉…等，算是非常強大

而且因為沒有甚麼依賴性的問題，故專案要移植是相當容易的

這裡是作者的Github : fengyuanchen/viewerjs: JavaScript image viewer. (github.com)

另外這個則是作者線上的範例 : Viewer.js (fengyuanchen.github.io)

好了，現在回到正題

我們先來看看本來的內建的功能

就是下面的那一排工具列!

自訂義圖示及功能

而今天客戶要求要加上一個列印按鈕

那讓我們先研究一下，本來的圖示是怎麼出現的

省略一下查找的過程，我們看了下viewer.css的寫法後，發現居然是用Base64編碼的圖片!!

然後用位置的方式去切割(大概吧!?)

⬆️ 將該Base64 轉換為圖片之後，可以看到功能列的按鈕都在這裡了(調整了色調，不然都是白的看不太到)

然後各功能是這麼設定的

這樣看起來，我們想要新增一個圖示勢必要找一個新的辦法了

除非你想要修改本來的Base64編碼的圖檔，最後再加一個… 或許可以吧，但我沒那麼瘋狂…

再經過多方尋找及測試後，總算找到了一個辦法

這個辦法是透過 FontAwesome這個開源的圖示庫來達成，怎麼引用這邊就不特別說明了

這次用的是 FontAwesome 6 的免費版

首先在呼叫Viewer的時候，特別定義toolbar出來 (不定義就會是全部)

	 var viewer = new Viewer(image, {
		 hidden: function () {
			 viewer?.destroy();
			 document.body.removeChild(imageContainer);
		 },
		 toolbar: {
				 zoomIn: false,
				 zoomOut: false,
				 oneToOne: true,
				 reset: true,
				 prev: true,
				 play: true,
				 next: true,
				 rotateLeft: true,
				 rotateRight: true,
				 flipHorizontal: true,
				 flipVertical: true,
				 print: function () {
					 printPic();
				 }
			 }
	 });
	 viewer.show();

在toolbar設定裡，可以將你不想要的按鈕給隱藏(這裡就隱藏了放大縮小)

另外，我們新增了一個 print的功能 (printPic 就是個自訂義的JS function)

下一步，我們就要去改動 viewer.css 這個檔案了

.viewer-print::before {
    font-family: 'Font Awesome 6 Free';
    content: '\f019';
    font-size: 14px;
    color: white;
    display: inline-block;
    position: relative;
    bottom: -8px;
}

要新增這一段，第一點 .viewer-print這個class 會在 toolbar設置時啟動產生，故如果你的功能名字就 abc

那這邊就應該是 【.viewer-abc::before】

重要的是content 中的 \f019，這個是我們要使用的圖示的Unicode編碼

這次選用的圖示 : Find Icons with the Perfect Look & Feel | Font Awesome，也可以去這裡找更多圖示

當然，如果要使用不同版本的 FontAwesome 也是可以的，但就要注意 font-family 的設定

話不多說，來看看效果如何吧~

可以看到圖示完美的出現了! 可喜可賀~

結論

Viewer.js 算是一個相當好上手的圖片套件了

整體呼叫以及使用都蠻容易的，之後可以專門寫個一篇使用教學

但像是今天這種自訂義的問題，在網路上卻是很難查到

💔 整篇文章都是自己寫的並測試，如果要引用相當歡迎，但不要整碗端走就好~

⭐ 要是能幫我宣傳或是點個廣告，我們都會很感謝的~

✅如有任何疑問，歡迎透過留言或messenger讓我們知道 !

其他筆記們