watermark.js瀏覽器中的水印生成庫(kù)

watermark.js 是一個(gè) JavaScript 框架用于以批量的方式對(duì)圖片插入水印。它利用 HTML5 canvas 標(biāo)簽實(shí)現(xiàn)，只要為圖片添加特定的 class 就能添加水印。采用 ES6 編寫而成，并通過(guò) Babel 提供給當(dāng)前的瀏覽器。支持網(wǎng)址、文件輸入、blob 和頁(yè)面圖像。

任何支持 File 和 FileReader 的瀏覽器都應(yīng)該可以工作。以下瀏覽器已經(jīng)過(guò)測(cè)試：

• IE10 (Windows 7)

• Chrome 42 (OS X 10.10.3)

• Firefox 38 (OS X 10.10.3)

• Safari 8.0.6 (OS X 10.10.3)

• Opera 29.0 (OS X 10.10.3)

Composite Images

watermark(['/img/shepherd.jpg', '/img/logo.png'])
  .image(watermark.image.lowerRight())
  .then(function (img) {
    document.getElementById('composite-image').appendChild(img);
  });

Alpha Transparency

watermark(['/img/forest.jpg', '/img/logo.png'])
  .image(watermark.image.lowerRight(0.5))
  .then(function (img) {
    document.getElementById('alpha-image').appendChild(img);
  });

Text

watermark(['/img/field.jpg'])
  .image(watermark.text.lowerRight('MyPhoto', '28px serif', '#fff', 0.5))
  .then(function (img) {
    document.getElementById('text').appendChild(img);
  });