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

本文轉載自查看原文 2018-03-05 15:52 2818 canvas 為圖片添加水印

代碼地址如下：
http://www.demodashi.com/demo/11637.html

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

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

添加水印的原理

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

將需要添加水印的圖片繪制到 canvas 上
將水印圖片繪制到 canvas 上
將 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 中的添加水印的類可以單獨使用，自定義的配置有如下幾項：

水印圖片路徑
水印添加位置：目前支持 9 種位置，分別是左上角 | 右上角 | 左下角 | 右下角 | 頂部水平居中 | 底部水平居中 | 左邊垂直居中 | 右邊垂直居中 | 水平垂直居中（默認位置）
水印位置與圖片邊緣的距離：默認 10px，在水平垂直居中時無效
水印與圖片的寬度比：用來保證不管在多大的圖片上都能達到相同的顯示效果