推薦一款可以批量為圖片添加水印js庫

今天推薦一款可以給指定圖片添加水印的就是庫，它叫watermark.js。

watermark.js是一個JavaScript框架用於以批量的方式對圖片插入水印。它利用HTML5canvas標籤實現，只要為圖片添加特定的class就能添加水印。

它有以下特點：

• 用圖像或者文字來蓋章

• 允許你在一幅圖像上的8個角落任選一個位置加水印

• 水印圖像確定后才決定大小和格式

• 導出的圖像是 base64 類型，所以可能會直接改為老的圖片或者上傳伺服器，例如 Imgur。

效果如上圖右下角所示。

以下是一個使用範例：

html:

<img src="./test.jpg" alt="">

Advertisements

js:

<script src="./watermark.js"></script>

<script>

var load=false;

window.onload=function(){

if(!load){

wmark.init({

"position":"bottom-right",

"opacity":50,

"className":"watermark",

"path":"./watermark.png"

});

load=true;

}

}

</script>

十分簡單明了，就一個方法wmark.init和四個參數：position默認值"bottom-right"，可選值有"top-left"|"top-right"|"bottom-right"|"bottom-left"，opacity可設置水印圖片的透明度，默認50，path為水印圖片的位置，className為需要添加水印的class名稱。