watermark-vue3

watermark-vue3

A lightweight Vue3 component for adding custom watermarks to web pages.

Introduction

watermark-vue3 is a lightweight component based on Vue3 that allows you to add custom watermarks to your web pages. With this component, you can freely set watermark text, font size, font, color, rotation angle, opacity, width and height parameters to easily achieve the watermark effect.

Installation

Install via npm:

npm install watermark-vue3

Usage

1. Import Watermark component:

<template>
  <Watermark :options="options" :visible="true"/>
</template>

<script setup lang="ts">
import Watermark from 'watermark-vue3';

const options = {
  text: 'This is a watermark',
  fontSize: 14,
  fontFamily: 'Microsoft YaHei',
  color: 'rgba(0, 0, 0, 0.3)',
  rotate: -30,
  opacity: 0.5,
  width: 200,
  height: 100,
};
</script>

2. Add relative or fixed positioning to the element where you want to add watermark:

.watermark-wrap {
  position: relative;
}

Props

Default values for options prop

Example

<template>
  <div class="watermark-wrap">
    <img src="https://raw.githubusercontent.com/isnl/watermark-vue3/HEAD/image.jpg" alt="">
    <Watermark :options="options" :visible="true"/>
  </div>
</template>

<script setup lang="ts">
import Watermark from 'watermark-vue3';

const options = {
  text: ['For testing only', 'Not for commercial use'],
  fontSize: 18,
  fontFamily: 'Arial',
  color: 'rgba(255, 0, 0, 0.2)',
  rotate: -45,
  opacity: 0.6,
  width: 300,
  height: 150,
};
</script>

<style scoped>
.watermark-wrap {
  position: relative;
}
</style>