利用HTML5與Javascript為圖片加浮水印

作者: Jas / 發表於 2011-04-04

watermark-1

網路圖片最常見的版權宣告形式大概就是浮水印(Watermark)

對Designer來說,使用Photoshop為圖片加個浮水印當然不會是什麼難事。

即使偶爾遇到需要處理大量圖檔的情況,也可以利用批次處理(Batch Processing)功能來解決。

但,使用Photoshop為圖片加浮水印這個動作本身雖然簡單,甚至可以是不假思索地機械化進行,卻終究還是會打斷既有工作排程的進行。

打斷既有工作排程,往往會讓設計工作變得事倍功半。設計或創意工作畢竟需要延續而流暢地進行,否則就得為強迫切換付出代價。

為了避免生產力發生不必要的虛耗,為圖片的版權宣告形式尋找便利的替代方案是必要的。

如果你的客戶或網站訪客都已經改用支援HTML5的先進瀏覽器,或許可以考慮使用watermark.js來為圖片加浮水印。

watermark.js的使用方法很簡便。

首先,你必須下載watermark.js。

接著,使用純文字編輯器開啟watermark.js,並且進行必要的設定:

/* 個人設定在下面 */
"position": "bottom-right", // 預設為 右下 "bottom-right"
"opacity": 100, // 預設為 50
"className": "watermark", // 預設為 "watermark"
"path": "images/j.png" // 設定浮水印圖片路徑位址

上傳修改後的watermark.js到你的網站,然後,在擺置圖片的網頁原始碼</body>之前加上:

<script type="text/javascript" src="watermark.js"></script>

最後,只要在需要加上浮水印的圖片<img>裡加上class="watermark"即可。

watermark-2

綜合以上,我簡單實作了一個Demo頁面,不妨作為參考。





回上方