Vue Directive To Add Custom Watermarks To Images

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:

Vue Directive To Add Custom Watermarks To Images

Changelog:

08/25/2020

  • v1.1.0

Download Details:

Author: serializedowen

Live Demo: https://serializedowen.github.io/vue-img-watermark/

Download Link: https://github.com/serializedowen/vue-img-watermark/archive/master.zip

Official Website: https://github.com/serializedowen/vue-img-watermark

Install & Download:

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

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

You Might Be Interested In:

Add Comment