Press "Enter" to skip to content

Add A Watermark To Your Image With Just Single Directive

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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *