Watermarking can protect intellectual property rights well. Internal company information is often watermarked. This paper introduces some methods to realize watermarking in front end.

Ming watermark

Open watermark refers to the watermark visible to the naked eye.

To do open watermarking is to overlay the element of the watermark content on the target element. Because the watermark element covers the target element, events such as clicks on the target element are not triggered. This problem can be solved by setting the following style on the watermark element:

.water-mark {
  pointer-events: none;
}
Copy the code

The content of watermark is not difficult to achieve with div, Canvas and SVG. This article: from cracking a design website to talk about front-end watermarking (detailed tutorial) has detailed implementation code.

Removing such watermarks is easy. Open the console and delete the watermark element. Guard against this. We need to listen to the state of the watermark element, deleted or modified, to generate a new one. The Web provides a method, MutationObserver, that monitors changes to elements. Implementation code:

// Observer configuration (what changes need to be observed)
const config = {
  attributes: true.childList: true.subtree: true
};
const callback = function (mutationsList, observer) {
  for (let mutation of mutationsList) {
    // The watermark is removed
    mutation.removedNodes.forEach(function (item) {
      if (item === watermarkElem) {
      	// Recreate the watermark}});// The watermark has been modified
    if (mutation.type === 'attributes' && mutation.target === watermarkElem) {
      // Recreate the watermark}}};// Create an observer instance and pass in the callback function
const observer = new MutationObserver(callback);
// Observe the target node from the above configuration
observer.observe(document.body, config);
Copy the code

Dark watermark

Dark watermark refers to the watermark invisible to the naked eye.

There are many ways to generate dark watermark, usually slightly modify the color value of the pixel. The color value of each pixel of the picture is composed of RGB three elements. When we modify one of the components, it is hard for the human eye to see the change.

The process of watermarking is the process of changing image pixels:

const img = new Image();
const originalData;
img.onload = function() {
    ctx.drawImage(img, 0.0);
    // Get canvas pixel information for the specified region
    originalData = ctx.getImageData(0.0, ctx.canvas.width, ctx.canvas.height);
    // Add watermark algorithm
    const newData = addWatermark(originalData)
    // Generate a watermarked image
    ctx.putImageData(newData)
};
img.src = 'xiaolan.png';
Copy the code

The algorithm of watermarking is a little complicated, including DWT, DCT and FFT.

The process of reading watermark is the reverse process of the above operation.

If you find this article helpful, give it a thumbs up and share it with anyone who needs it

Reference documentation

  • Discussion on front-end Watermarking from cracking a Design Website
  • Unspeakable secret – Picture steganography that can be played on the front end