Vue Directive To Add Custom Watermarks To Images

Install & Download:

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

Description:

This is an easy Vue.js directive that adds custom watermarks to the images you provide.

How to use it:

1. Import and register the 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>

3. Possible options to customize the watermark.

const option = {
  // "bottomleft", "bottomright", "topleft", "topright", "center", "fill"
  mode: "bottomright",
  textBaseline: "middle",
  font: "15px Arial",
  fillStyle: "white",
  content: "@vuescript.com",
  rotate: 30
  
};

Preview:

Changelog:

08/25/2020

• v1.1.0