The background,

Recently, a project needed to put a watermark on the page. An implementation scheme is tried here.

Second, the implementation

1. Use canvas to draw watermark information

var can = document.createElement('canvas'); can.width = 250; can.height = 150; var cans = can.getContext('2d'); cans.rotate(-20 * Math.PI / 180); cans.font = '17px Vedana'; // ziti cans. FillStyle = 'rgba(200, 200, 200, 0.30); cans.textAlign = 'left'; cans.textBaseline = 'Middle'; Cans. FillText (" watermark data ", xIndex, yIndex); }Copy the code

2. Display watermarks on the page

  • Convert image to dataURL(base64)
canvas.toDataURL('image/png') 
Copy the code
  • Create a div for display
var div = document.createElement('div');
div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';
Copy the code

The left top repeat property indicates that the background image will repeat vertically and horizontally from left,top.

3. Use MutationObserver to monitor changes in the DOM tree structure

MutationObserver is used to monitor the changes of DOM tree structure to prevent the watermark from being removed artificially

Function createObserver(id,args){// Create an observer instance and pass in the callback function var Observer = new MutationObserver(()=>{if (document.getElementById(id) === null) { id = setWatermark(args); }}); Var option = {'childList': true, 'subtree': true, 'subtree': true}; observer.observe(document.body, option); // Observe the change of the node under body}Copy the code

Complete code

var watermark = {} function setWatermark(args) { console.log(... Var id = '111.222.333.456'; var id = '111.222.333.456'; var xIndex = 15; Var yIndex = 65; Var xInterval = 25 if (document.getelementById (id)! == null) { document.body.removeChild(document.getElementById(id)); Var can = document.createElement('canvas'); can.width = 250; can.height = 150; var cans = can.getContext('2d'); cans.rotate(-20 * Math.PI / 180); cans.font = '17px Vedana'; // ziti cans. FillStyle = 'rgba(200, 200, 200, 0.30); cans.textAlign = 'left'; cans.textBaseline = 'Middle'; for(let i = 0; i<args.length; i++){ cans.fillText(args[i], xIndex , yIndex); YIndex +=xInterval; } // Create div to display var div = document.createElement('div'); div.id = id; div.style.pointerEvents = 'none'; div.style.top = '70px'; div.style.left = '90px'; div.style.position = 'fixed'; div.style.zIndex = '100000'; div.style.width = document.documentElement.clientWidth - 50 + 'px'; div.style.height = document.documentElement.clientHeight - 50 + 'px'; Background = 'url(' + can.todataURL ('image/ PNG ') + ') left top repeat'; document.body.appendChild(div); return id; } function createObserver(id,args){var Observer = new MutationObserver(()=>{if (document.getElementById(id) === null) { id = setWatermark(args); }}); Var option = {'childList': true, 'subtree': true, 'subtree': true}; observer.observe(document.body, option); / / observation of nodes under the body} watermark. Set = function () {let args = Array. The prototype. Slice. Apply (the arguments); let id = setWatermark(args); CreateObserver (id,args); createObserver(id,args); Window.onresize = function(){setWatermark(args); } } window.watermark = watermark;Copy the code

Fourth, call

  • Write the code to the watermark.js file,
  • To introduce
  • call
Watermark. Set (" watermark 1"," WATERMARK 2",...) ;Copy the code

Multiple parameters are supported. When multiple parameters are passed, they will be displayed in branches.

<script src="/watermark.js"></script> ...... <script> window.onload = function(){// add watermark. Set (" watermark "); } </script> </body>Copy the code

Of course, this method can also be written directly in the page JS.

Note: The watermarking should be done later, before the tag, in case the DOM is not fully loaded.

Five, validation,

A page opens and the console executes the code

  1. Add a watermarking method to the window
  2. Adding a Watermark

The effect is as follows: