How to add watermark to images in Vue?

Vue is a popular JavaScript framework that is widely used for building web applications. Sometimes we need to add watermarks to images in Vue applications to protect the copyright of the image or increase the recognizability of the image. In this article, I will introduce you to a method of adding watermarks to images in Vue and provide corresponding code examples.

The first step is to introduce a third-party library for adding watermarks to Vue. It is recommended to use the watermarkjs library, which is a simple and easy-to-use JavaScript library that provides the function of adding watermarks to images. You can install it into the Vue project through the following command:

npm install watermarkjs

In the second step, we need to introduce the watermarkjs library into the Vue component and use the API it provides to add watermarks to in the picture. Suppose we have an ImageWithWatermark component for displaying images with watermarks. The code is as follows:

<template>
  <div>
    <img src="/static/imghw/default1.png"  data-src="imageSrc"  class="lazy"  : alt="Image with Watermark">
  </div>
</template>

<script>
import watermark from 'watermarkjs';

export default {
  data() {
    return {
      imageSrc: '',
    };
  },
  mounted() {
    this.addWatermark();
  },
  methods: {
    addWatermark() {
      const image = document.querySelector('img');
      watermark([image])
        .image(watermark.text.lowerRight('Watermark', '20px Arial', '#ffffff', 0.5))
        .then((img) => {
          this.imageSrc = img.src;
        });
    },
  },
};
</script>

In the above code, we are in the mounted life cycle of the component. The addWatermark method is called in the method to add a watermark. In the addWatermark method, we first select the img element in the document, and then use the API provided by watermarkjs to add the watermark. In this example, we used a text watermark and placed it in the lower right corner of the image, using 20px Arial font, white text color, and opacity 0.5. Finally, we assign the src attribute of the watermarked image to the imageSrc data attribute so that the image with the watermark can be displayed in the template.

When using the above code, you need to pay attention to the following points:

1. You need to replace the image address in the template code of the ImageWithWatermark component with yours The address of the image you want to add a watermark to.
2. You can adjust the watermark parameters in the watermark method according to your own needs, such as the content, position, font, color and transparency of the watermark.
3. If the project uses Vue Router, you may need to use this.$refs in the addWatermark method instead to select the image element to ensure that the image is found correctly.

The above is the method and sample code for adding watermarks to images in Vue. By using the watermarkjs library, we can easily add watermarks to images, protect the copyright of images and increase their recognizability. Hope this article can help you!

The above is the detailed content of How to add watermark to images in Vue?. For more information, please follow other related articles on the PHP Chinese website!