Vue指令向图像添加自定义水印 – vue-img-watermark

Vue指令向图像添加自定义水印 – vue-img-watermark

插件名称:vue-img-watermark

发布时间:2020年8月24日

插件作者:serializedowen

官网 GitHub下载

这是一个简单的Vue.js指令,可将自定义水印添加到您提供的图像中。

变更日志:

2020年8月25日

  • v1.1.0

安装和下载:

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

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

如何使用它:

1.导入并注册vue-img-watermark。

import plugin from '@serializedowen/vue-img-watermark'
Vue.use(plugin)

2. v-watermark用于创建您自己的水印。

<img v-watermark src="1.jpg"></img>

3.自定义水印的可能选项。

onst option = {

  // "bottomleft", "bottomright", "topleft", "topright", "center", "fill"
  mode: "bottomright",
  textBaseline: "middle",
  font: "15px Arial",
  fillStyle: "white",
  content: "@vuescript.com",
  rotate: 30
  
};
相关插件