vue-img-watermark is an easy Vue.js directive that adds custom watermarks to the images you provide.

add watermark on image use html5 and javascript, watermark js demo, image watermark npm, watermark text in javascript, add watermark image javascript

Fill Image Watermark Coding Tool | sfz

How to make use of it:

Install and download:

# Yarn
$ yarn add @serializedowen/vue-img-watermark

# NPM
$ npm i @serializedowen/vue-img-watermark --save

1. Import and register vue-img-watermark.

import plugin from '@serializedowen/vue-img-watermark'

Vue.use(plugin)

2. Use v-watermark to create your own watermarks.

<img v-watermark src="1.jpg"></img>

. Possible options to customize the watermark.

const option = {

  // "bottomleft", "bottomright", "topleft", "topright", "center", "fill"
  mode: "bottomright",
  textBaseline: "middle",
  font: "15px Arial",
  fillStyle: "white",
  content: "@",
  rotate: 30
  
};

Vue Directive To Add Custom Watermarks To Images, vue-img-watermark Plugin/Github, watermark js react

See Demo And Download

Official Website(serializedowen): Click Here

This superior jQuery/javascript plugin is developed by serializedowen. For extra Advanced Usage, please go to the official website.