水印專案的實現以及兩種實現方案的選優
阿新 • • 發佈：2020-11-26
水印專案我們提出了兩種解決方案
一、用shadow dom實現
1、基本思路
通過attachShadow這個方法生成一個shadow root 即shadow的根節點，然後在這個根節點下面通過迴圈語句新增水印，利用position為absolute進行排版，使其鋪滿容器
show me the code：
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
/*AMD. Register as an anonymous module.
*define([], factory); */
define([], factory());
} else if (typeof module === 'object' && module.exports) {
/*Node. Does not work with strict Commonjs 2、優化
但是畢竟水印是有關安全方面的，如果別人開啟開發者模式很輕鬆的就水印的內容更改甚至完全刪除，所以不能就這麼完事了。我們需要監聽DOM的變化，判斷如果使用者通過開發者工具手動修改了水印的dom，我們就重新渲染水印，實現水印不能手動進行了修改。
思路：通過mutationObsever監聽DOM的變化，判斷是否是水印部分的dom 變化，如果是則重新渲染
show me the code:
/* 監聽DOM的變化，防止手動刪除 */
let observerDomReloadMark = (settings) => {
// Select the node that will be observed for mutations
let observer_node = document.querySelector('#shadowContainer')
// Options for the observer (which mutations to observe)
let config = {
attributes: true,
childList: true,
subtree: true
};
// Callback function to execute when mutations are observed
const mutationCallback = (mutationsList) => {
// for (let mutation of mutationsList) {
// let type = mutation.type;
// switch (type) {
// case "childList":
// console.log("A child node has been added or removed.");
// break;
// case "attributes":
// console.log(`The ${mutation.attributeName} attribute was modified.`);
// break;
// case "subtree":
// console.log(`The subtree was modified.`);
// break;
// default:
// break;
// }
// }
// loadMark(settings)
console.log(2222)
};
// Create an observer instance linked to the callback function
let observer = new MutationObserver(mutationCallback);
// Start observing the target node for configured mutations
observer.observe(observer_node, config);
// Later, you can stop observing
// observer.disconnect();
}這個方法看起來完美，然而現實很殘酷，當我們再瀏覽器中看效果的時候發現mutationObsever不能監聽shadow的變化，what? 查資料後發現shadow是獨立於dom樹的，相當於被隔離起來的dom。既然如此那就放棄裝逼吧，還是老老實實用正常的dom實現吧，有多少個水印就生成多個水印的dom，這必要會導致效能問題。好吧，我們還是再另尋他法。
二、canvas繪圖
1、基本思路
通過canvas把單個水印繪製出來，用toDataURL方法生成圖片的base64編碼，放在水印容器的background-image：url()裡面，背景圖片會自動鋪滿整個容器。思想比第一種方案簡單很多。
show me the code:
var canvas = document.createElement('canvas')
canvas.id = 'canvas'
canvas.width = defaultSettings.watermark_width // 單個水印的寬度
canvas.height = defaultSettings.watermark_height // 單個水印的高度
var ctx = canvas.getContext('2d')
ctx.font = 'normal 12px Microsoft Yahei' // 設定樣式
ctx.fillStyle = 'rgba(112, 113, 114, 0.2)' // 水印字型顏色
ctx.translate(canvas.width/2,canvas.height/2)
ctx.rotate((defaultSettings.watermark_angle * Math.PI) / 180) // 水印偏轉角度
ctx.translate(-canvas.width/2,-canvas.height/2)
ctx.fillText(defaultSettings.watermark_txt, 30, 20)
var src = canvas.toDataURL('image/png')
/* 設定水印的容器 */
var watermark_parent_node = null
if (defaultSettings.watermark_parent_selector) {
watermark_parent_node = document.querySelector(defaultSettings.watermark_parent_selector)
} else {
watermark_parent_node = document.body
}
watermark_parent_node.style.pointerEvents = 'none'
// 判斷容器是否已經設定了backgroundImage屬性值
if (!watermark_parent_node.style.backgroundImage) {
watermark_parent_node.style.backgroundImage = 'URL(' + src + ')'
} else {
watermark_parent_node.style.backgroundImage = watermark_parent_node.style.backgroundImage + ', URL(' + src + ')'
}PPT模板下載大全https://redbox.wode007.com
2、優化
優化思路和第一種方案一樣，只不過這種方案的好處就是可以直接監聽到變化。
三、兩種方案的對比
| 方案 | 優點 | 缺點 |
| shadow DOM | 1、低耦合，shadow dom與原先的DOM樹隔離，不會影響到系統本有的功能。 |
1、shadow DOM不能夠被監聽到 2、水印文案及DOM被篡改的成本較低 3、實現邏輯比較複雜 |
| canvas繪圖 |
1、實現邏輯比較清晰 2、水印資料生成圖片，使用者想篡改比較難 3、水印被篡改能夠被監聽到 |
1、水印圖片是被放在background-image裡面的，如果原先在class裡面設定了background-image屬性的話會被覆蓋掉 |