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
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