Various solutions to achieve watermark effects on the front end

❝
Front-end development continues to innovate, one of which is implementing watermark effects. Watermarks can be used to protect the copyright of content, provide additional information, or beautify the page. This article will delve into several common front-end watermarking solutions to help everyone better understand how to achieve watermarking effects.
❞

1. Add watermark using CSS pseudo-element

Using CSS pseudo-elements is a simple and flexible way to add a watermark, here is an example:

/* 示例代码 */
<div class="watermark"></div>
.watermark::before {
    
    
  content: "我是水印";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.5;
  font-size: 48px;
  color: #ccc;
  pointer-events: none;
}

"Results as shown below:"

In this example, we used the CSS pseudo-element ::before to create the watermark. The following is an explanation of each CSS property:

content : Defines the text content of the watermark.
position: fixed : Fix the watermark on the screen and not move as the page scrolls.
top and left : Place the watermark in the center of the page.
transform : passed translate function to adjust the position of the watermark.
opacity : Set the transparency of the watermark.
font-size and color : Define the font size and color of the watermark.
pointer-events: none : Prevent watermarks from interfering with user interaction.

2. Use Canvas to draw watermarks

Drawing watermarks using Canvas is a highly customizable way, here is an example:

<!-- 示例代码 -->
<canvas id="watermarkCanvas" width="800" height="600"></canvas>

<script>
  const canvas = document.getElementById("watermarkCanvas");
  const context = canvas.getContext("2d");

  const image = new Image();
  image.src = "your-image.jpg"; // 你的图片URL

  image.onload = function() {
     
     
    context.drawImage(image, 0, 0, canvas.width, canvas.height);

    context.font = "48px Arial";
    context.fillStyle = "rgba(255, 0, 0, 0.5)";
    context.fillText("Watermark Text", 50, 50);
  };
</script>

In this example, we create a Canvas element and use JavaScript to draw the watermark. Here are the key points from the example:

<canvas> Element is used to create a canvas with a specified width and height.
Loaded an image via JavaScript and used drawImage method draws the picture onto the Canvas.
use font and fillStyle attributes define the font and color of the watermark.
use fillText method draws watermark text on Canvas.

3. Repeat background image using CSS

The way to add a repeating watermark using CSS is to use the watermark image as the background image and use the background-repeat attribute to achieve the repeating effect. The following is an example:

<!-- 示例代码 -->
<style>
  .watermarked-element {
     
     
    width: 100%;
    height: 100%;
    background-image: url('watermark.png'); /* 水印图片的URL */
    background-repeat: repeat; /* 重复水印图片 */
    opacity: 0.5; /* 设置水印透明度 */
    pointer-events: none; /* 防止水印干扰用户交互 */
  }
</style>

<div class="watermarked-element">
  <!-- 页面内容 -->
</div>

In this example, we create a container element .watermarked-element that contains a watermark, and set the watermark image as the background image. By setting background-repeat: repeat;, the watermark image will be displayed repeatedly within the container. The transparency of the watermark can be controlled by adjusting the opacity attribute. Finally, use pointer-events: none; to prevent the watermark from interfering with user interaction.

This method is suitable for situations where you need to add a watermark to the entire page or a specific element, and does not require drawing the watermark through Canvas.

4. Use SVG images

Use SVG images to create vector graphic watermarks and embed them into web pages:

<!-- 示例代码 -->
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
  <text x="10" y="40" font-family="Arial" font-size="24" fill="rgba(255, 0, 0, 0.5)">
    Watermark Text
  </text>
</svg>

In this example, we use SVG (Scalable Vector Graphics) to create the watermark. Here is an explanation of SVG:

<svg> Element used to create SVG images.
<text> Element is used to add text in SVG.
x and The y attribute is used to position the text.
font-family and The font-size attribute defines the font and size of the watermark.
fill Properties define the color and transparency of the text.

5. Use third-party libraries

Third-party libraries such as watermark.js provide a convenient way to add watermarks:

<!-- 示例代码 -->
<script src="watermark.js"></script>
<script>
  const watermarkConfig = {
    
    
    watermarkText: "

Watermark Text",
    watermarkTextFont: "24px Arial",
    watermarkTextColor: "rgba(255, 0, 0, 0.5)",
  };
  
  watermark.init(watermarkConfig);
  watermark.load({
    
    
    watermark_x: 20,
    watermark_y: 20,
  });
</script>

In this example, we use a third-party library watermark.js to add a watermark. You can configure the text, font, color and other properties of the watermark as needed, and use the methods provided by the library to initialize and load.

6. Summary

This article introduces several front-end watermarking solutions. You can choose the appropriate method to achieve the watermarking effect according to the specific project. No matter which method you choose, be sure that the watermark does not affect the user experience.

This article is published by mdnice Multiple platforms