About the code operation of JS front-end implementing watermarks

Web page watermark

Implementation ideas

Generate a watermark image through canvas
Set the image as the background image of the target node through css
Monitor the class name change of the target node through MutationObserver to prevent the watermark from being deleted

Code Operation

Generate a watermark image through canvas

function createImgBase(options) {
  const { content, width, height } = options;
  const canvasDom = ("canvas");
  let ctx = ("2d");
   = width;
   = height;
  if (ctx) {
    // Set the direction of the brush    ((-14 * ) / 180);
    // Set watermark style     = "rgba(100,100,100,0.4)";
     = "italic 20px Arial";
    // Render watermark    ((text, index) =&gt; {
      (text, 10, 30 * (index + 1)); // Pull the spacing of 30 longitudinally    });
  }
  // (canvasDom);
  // Convert canvas to picture  return ("image/png");
}

// createImgBase({
// content: ["Jie Si's ah", "Jie Si's sui seal", "Internal confidential materials", "External leakage is strictly prohibited!"],//   width: 200,
//   height: 200,
// });

Set the watermark as the background image of the target node

function getWaterMark({
  content,
  className,
  canvasHeight = 140,
  canvasWidth = 150,
}) {
  // Generate pictures  const data_url = createImgBase({
    content,
    width: canvasWidth,
    height: canvasHeight,
  });
  // Add watermark image as background image by setting pseudo-element style  const defaultStyle = `
  .${className} {
    position: relative;
  }
  .${className}::after {
    content: "";
    background-image: url(${data_url});
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
  }`;

  const styleDom = ("style");
   = defaultStyle;
  (styleDom);
}
// getWaterMark({
// content: ["Jie Si's ah", "Jie Si's sui seal", "Internal confidential materials", "External leakage is strictly prohibited!"],//   className: "content",
// });

Add mutationObserver to listen for changes in node

function listenerDOMChange(className) {
  // Get the node to be listened to  const targetNode = (`.${className}`);
  // Create a listener  const observer = new MutationObserver(mutationList =&gt; {
    // traverse the change records    for (let mutationRecord of mutationList) {
      // If the class attribute of the target node changes, determine whether the class name has been deleted. If so, add the class name back      if ( === "class") {
        if(!().includes(className)) {
          (className)
        }
      }
    }
  });
  // Start monitoring  (targetNode, {
    attributes: true,
  });
}

function getWaterMark({
      content,
      className,
      canvasHeight = 140,
      canvasWidth = 150,
}) {
  // Listen  listenerDOMChange(className);
  const data_url = createImgBase({
    content,
    width: canvasWidth,
    height: canvasHeight,
  });
  // ...
  const styleDom = ("style");
   = defaultStyle;
  (styleDom);
}

About MutationObserver

MutationObserver is used to monitor changes in DOM, addition and deletion of DOM, changes in DOM properties, changes in subnodes and text content, all can be listened to.

MutationObserver's listening is different from events. Events are synchronous. DOM changes will immediately trigger the corresponding event. MutationObserver is asynchronous and will trigger the listening callback when the next micro task is executed.

Create a MutationObserver

const observer = new MutationObserver((mutationsList, observer) =&gt; {
    // mutationsList mutationRecord array records the DOM changes    // Observer MutationObserver instance
    // Listen to callbacks    (mutationsList, observer);
})

(, {
  attributes: true,
  characterData: true,
  childList: true,
  subtree: true,
  attributeOldValue: true,
  characterDataOldValue: true
});

Turn on monitoring

// node listens to node// config monitoring configuration (what to listen to)// (node, config);
(, {
  attributes: true,  // Attribute changes  attributeOldValue: true,  // When observing the changes of attributes, whether it is necessary to record the attribute value before the change  attributeFilter: [‘class',‘src']  // Specific attributes that need to be observed
  characterData: true,  // Changes in node content and text  characterDataOldValue: true,  // When observing the change of characterData, do you need to record the attribute value before the change
  childList: true,  // Subnode changes  subtree: true,    // All descendant nodes});

// Stop monitoring()

// Clear change record()

Picture watermark

Implementation ideas

Solution 1: Add watermark through oss Solution 2: Generate a watermark image through canvas

oss implementation

The oss method is not described too much. Simply put, it is to add parameters to the image link when obtaining the image, so that the oss can generate a watermarked image. Note:

The transparent area of the png image cannot be added with watermarks. Solution: You can add parameters to make oss convert the image to jpg format (jpg format will fill the transparent area with color).
The font case is a fixed value, and the original image size will affect the display size of the watermark font. Solution: After creating an img tag, onLoad gets the picture, calculate the appropriate font size based on the image width and height, and then obtain the image with a watermark again.
Users can delete the watermark by deleting parameters. Solution: Set the security level of oss, which is inaccessible without watermarks.

canvas implementation

Convert img to canvas

async function imgToCanvas(cav, imgSrc) {
  const img = new Image();
   = imgSrc;
  // Prevent image loading failures caused by cross-domain (this method has limitations)  ("crossOrigin", "anonymous");
  // Wait for the picture to load  await new Promise(resolve =&gt; ( = resolve));
   = ;
   = ;
  const ctx = ("2d");
  if (ctx) {
    (img, 0, 0);
  }
  return cav;
}

Add watermark

function addWaterMask(cav, content) {
  const ctx = ("2d");
   = "rgba(100,100,100,0.2)";
   = `24px serif`;
  (0, 0);
  ((5 * ) / 180);
  // Generate watermark  let x = 0, y = 0;
  while (x &lt; ) {
    y = 0;
    while (y &lt; ) {
      (content, x, y);
      y += 100;
    }
    x += 150;
  }
}

(async function () {
  const canvas = ("canvas");
  await imgToCanvas(
    canvas,
    "/ma_pic2/0/shot_54360764_1_1716462139/0"
  );
  addWaterMask(canvas, "Introduction to Si Sui Seal");
  // (canvas);
  return ("image/png")
})();

This is the end of this article about the code operation of JS front-end implementation of watermarks. For more related content on JS watermark implementation, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!