Several methods and advantages and disadvantages of front-end implementing watermark function

In front-end development, adding watermarks to web pages or images is a common requirement. The following are several methods to implement watermarks, including explanations of their advantages and disadvantages:

1. Use CSS background image method

Add watermarks as background images to the web page's container.

Implementation steps:

.watermark-container {
  position: relative;
}

.watermark-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('');
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.2;
  pointer-events: none; /* Make sure the watermark does not affect user operation */
}

advantage:

• Simple and easy to use, good compatibility.
• It uses pure CSS to achieve better performance.

shortcoming:

• Applicable only to static pages, with less control over complex layouts or dynamic content.
• The watermark can be easily removed by modifying the CSS.

2. Dynamically draw watermarks using HTML5 Canvas

passCanvasThe element draws a watermark dynamically, suitable for any element on an image or page.

Implementation steps:

<canvas ></canvas>
<img  src="" alt="Example Image" />
<script>
  const canvas = ('watermarkCanvas');
  const img = ('targetImage');
  
   = ;
   = ;
  
  const ctx = ('2d');
  (img, 0, 0);
  
  // Set watermark style   = "30px Arial";
   = "rgba(255, 255, 255, 0.5)";
   = "center";
   = "middle";
  
  // Draw watermarks on the image  ("Watermark",  / 2,  / 2);
</script>

advantage:

• Dynamically generate watermarks, and you can customize the content, location, style, etc. of the watermark.
• Watermark embedded inCanvasIt is not easy to be removed in the image.

shortcoming:

• Requires JavaScript support.
• There will be some overhead on poor performance devices.

3. Add watermarks using SVG

By usingSVGElements to implement watermarks, which can display watermarks on vector graphics, and the watermarks can be scaled without distortion.

Implementation steps:

<div class="watermark-container">
  <img src="" alt="Example Image">
  <svg class="watermark" xmlns="http:///2000/svg" width="100%" height="100%">
    <text x="50%" y="50%" fill="rgba(255, 255, 255, 0.3)" font-size="40" text-anchor="middle" dominant-baseline="middle" transform="rotate(-30, 50, 50)">
      Watermark
    </text>
  </svg>
</div>

advantage:

• Watermark zoom adaptive, suitable for responsive layouts.
• Using vector graphics, the watermark will not be distorted.

shortcoming:

• The watermark can be removed through the DOM operation.
• Compatibility needs to take into account some older browsers (such as IE).

4. Use image processing libraries (such as )

With the help of JavaScript image processing library, such as, can achieve complex watermark effects.

Implementation steps:

<canvas ></canvas>
<script src="/ajax/libs//4.6.0/"></script>
<script>
  const canvas = new ('canvas');
  
  ('', function(img) {
    ();
    ();
    (img);
    
    const watermark = new ('Watermark', {
      left:  / 2,
      top:  / 2,
      fontSize: 40,
      fill: 'rgba(255, 255, 255, 0.5)',
      angle: -30
    });
    
    (watermark);
  });
</script>

advantage:

• Provides powerful image processing capabilities to suit complex watermark needs.
• You can flexibly set the watermark in the picture, and the watermark can be moved, scaled, rotated, etc. as needed.

shortcoming:

• Introduce third-party libraries to increase page load.
• A little over-designed for a simple watermark.

5. Use HTML DOM elements to implement watermarking

Implement watermarks directly on the page by overlaying DOM elements.

Implementation steps:

<div class="watermark-container">
  <img src="" alt="Example Image">
  <div class="watermark">Watermark</div>
</div>

<style>
.watermark-container {
  position: relative;
}

.watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: 40px;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
</style>

advantage:

• Simple and easy to use, DOM-based operation, no image processing required.
• Styles and layouts can be controlled using CSS.

shortcoming:

• Easy to be removed or covered, with low security.
• Suitable for simple watermark effects.

6. Generate watermarked images in combination with the backend

The front-end requests the back-end API, and generates a watermarked image from the back-end and returns it to the front-end to display.

advantage:

• High security, the watermark cannot be removed through front-end operations.
• The backend can handle complex watermark logic.

shortcoming:

• Rely on the backend to increase server load.
• Not suitable for pure front-end scenarios.

in conclusion

• Simple scene: Watermark can be implemented using CSS background image or DOM elements, which is easy to implement but has low security.
• Dynamically generate watermarks: Use Canvas or SVG to implement dynamic watermarks, with higher flexibility.
• Complex image processing: Image processing libraries can be introduced, such as using the backend to generate watermarks to improve the non-removability and security of watermarks.

You can choose the most suitable implementation method based on specific needs and performance considerations.

This is the article about several methods and advantages and disadvantages of front-end implementing watermark functions. For more related content on front-end implementing watermark functions, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!