https://github.com/serializedowen/vue-img-watermark
add watermark for your image with only a single directive
https://github.com/serializedowen/vue-img-watermark
vue vue-component watermark
Last synced: 2 months ago
JSON representation
add watermark for your image with only a single directive
- Host: GitHub
- URL: https://github.com/serializedowen/vue-img-watermark
- Owner: serializedowen
- License: gpl-3.0
- Created: 2020-08-06T08:06:36.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-02-02T08:32:35.000Z (over 4 years ago)
- Last Synced: 2025-06-25T06:42:41.064Z (4 months ago)
- Topics: vue, vue-component, watermark
- Language: JavaScript
- Homepage: http://serializedowen.github.io/vue-img-watermark/
- Size: 2.37 MB
- Stars: 19
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-img-watermark :maple_leaf:
[](https://travis-ci.com/serializedowen/vue-img-watermark)
## Demo
http://serializedowen.github.io/vue-img-watermark/
## Installation
```sh
npm install --save @serializedowen/vue-img-watermark
```
```
yarn add @serializedowen/vue-img-watermark
```
## Usage
```js
import plugin from '@serializedowen/vue-img-watermark'
Vue.use(plugin)
```
```html
```
* put `v-watermark` on your `![]()
` tag to generate watermark for your image
* fully customizable with configuration object.
* use `setScopedConfig()` in `beforeCreate` hook in your vue component to scope configuration to that particular vue component
* use `v-watermark={{config: OptionConfig}}` to customize watermark behavior
* The order of precedance will be directive value > component scoped options > global options
* register your custom rendering strategy with `registerCustomStrategy()` which you can later on use with `{mode: name of your strategy}` :grinning:
## Known Issues:
- [x] currently `canvas.drawImage()` has to be wrapped in a `setTimeout()` call to work, reason to be identified.