神奇的canvas——巧用 canvas 為圖檔添加水印

代碼位址如下：

http://www.demodashi.com/demo/11637.html

很久之前寫過一篇關于 canvas 的文章，是通過 canvas 來實作一個絢麗的動畫效果，不管看過沒看過的小夥伴都可以直接猛戳下面的連結直達這篇文章哦！

因為之前很多篇都是偏向理論的，是以這次決定上點實際的内容——通過 canvas 為圖檔添加自定義水印，并且在文章末尾也會附上源碼。下面進入正文~~~

添加水印的原理

原理很簡單，主要分為下面幾步

1. 将需要添加水印的圖檔繪制到 canvas 上
2. 将水印圖檔繪制到 canvas 上
3. 将 canvas 的内容導出為圖檔

使用到的 canvas 的 api

// 擷取目前 canvas 的上下文環境，用來操作在 canvas 上繪制内容
// 
const ctx = canvas.getContext('2d')

// 向 canvas 上繪制圖檔
// image 為一個圖檔對象
// x 為繪制圖檔的橫向起始位置，y 為繪制圖檔的縱向起始位置
// width 為要繪制在 canvas 上寬度， height 為高度
// 該方法最多可接受 9 個參數，進而實作剪裁的效果，但是與本篇内容無關，感興趣的小夥伴可以搜尋該方法
ctx.drawImage(image, x, y, width, height)

// 将 canvas 上的内容導出為 base64 格式的字元串，導出後可以直接指派給 Image 對象的 src 屬性
// 第一個參數為導出的圖檔格式，可接受第二個參數（小于或等于 1 的數，表示導出圖檔的壓縮比率）
canvas.toDataURL("image/png")           

其他要點

如果是通過連結擷取的圖檔和水印，那麼需要在繪制水印圖檔之前，先将兩張素材圖檔加載完成，由于圖檔的加載時異步的，是以務必在確定圖檔已經成功加載後才可以開始添加水印

demo 最終的實作效果

可以看到每張圖檔的右下角都有一張小的水印圖檔

demo 中的添加水印的類可以單獨使用，自定義的配置有如下幾項：

1. 水印圖檔路徑
2. 水印添加位置：目前支援 9 種位置，分别是 左上角 | 右上角 | 左下角 | 右下角 | 頂部水準居中 | 底部水準居中 | 左邊垂直居中 | 右邊垂直居中 | 水準垂直居中（預設位置）
3. 水印位置與圖檔邊緣的距離：預設 10px，在水準垂直居中時無效
4. 水印與圖檔的寬度比：用來保證不管在多大的圖檔上都能達到相同的顯示效果

該類可以同時為多張圖檔添加水印，但是隻有當之前的多張圖檔全部完成添加後，才可以設定更多需要添加水印的圖檔

相容性

該類使用 ES6 編寫，且使用到了

defineProperty()

來監聽狀态的變動，是以不相容 IE 的舊版浏覽器，主流浏覽器都可以使用

使用方式

具體的使用方式可以在 demo 的 watermark.js 中看到，源碼中有完善的注釋，整個方法加上注釋隻有 306 行，想要閱讀源碼的小夥伴也可以很輕松的讀完

源碼将在文章末尾貼出

使用過程中出現 bug 怎麼辦？

一旦出現 bug，請立即在文下評論，或者直接私信我都是沒問題哒！因為這個 demo 是周二晚上寫的，時間匆促，雖然已經極力避免出現問題，但如果真的出現了問題，還請各位小夥伴能夠諒解。隻要你指出，我一定盡快修複。當然如果你願意自己動手修複 bug，那也是極好的！

如果你對源碼有任何了解不了的地方，也歡迎你評論或者私信我哦！

如果你想添加文字水印或文字圖檔組合水印，也可以試着修改源碼，通過 canvas 的繪制文字 api 來實作哦！

最後，關門放…

代碼結構截圖

代碼檔案截圖

運作方式

下載下傳後，需要将檔案放到一個http 伺服器中，然後啟動http服務，來通路

通路如下圖所示：

神奇的canvas——巧用 canvas 為圖檔添加水印

代碼位址如下：

http://www.demodashi.com/demo/11637.html

注：本文著作權歸作者，由demo大師發表，拒絕轉載，轉載需要作者授權