watermark-for-vue

安装

npm install watermark-for-vue

使用方式

import Watermark from "watermark-for-vue";

Vue.use(Watermark)

也可以

import Watermark from "watermark-for-vue";

export default {
  name: "App",
  components: {
    Watermark,
  },
  data() {
    return {
      options: {
        content: "",
      },
    };
  },
};

<watermark :options="options">
    <div class="container">
      内容区域
    </div>
</watermark>

注意事项

默认使用文字填充水印，当传入 src 时水印内容为图片水印，优先级高于文字水印。

options: {
  src: require("@/assets/logo.png");//https://avatars.githubusercontent.com/u/58333667?s=60&v=4
}

options 配置

属性	说明	类型	默认值
width	canvas	元素宽	string 300
height	canvas	元素高	string 200
textAlign	绘制文本的对齐方式	string	left
textBaseline	文本基准线	string	bottom
font	字体大小及样式	string	16px Microsoft Yahei
fillStyle	自定义水印的颜色	string	black
content	水印内容	string	内部文档，请勿外传
globalAlpha	设置图形和图像透明度的值	number	0.1
rotate	旋转角度	number	16
repeat	水印重复属性	string	repeat
x	canvas 横向偏移量	number	15
y	canvas 纵向偏移量	number	15
src	水印为图片时的路径（支持本地和网络图片）	string	null
sx	开始剪切的 x 坐标位置	number	0
sy	开始剪切的 y 坐标位置	number	0
dx	在画布上放置图像的 x 坐标位置	number	0
dy	在画布上放置图像的 y 坐标位置	number	0
iwidth	要使用的图像的宽度。（伸展或缩小图像）	number	60
iheight	要使用的图像的高度。（伸展或缩小图像）	number	60

//canvas绘制图片水印的参数
ctx.drawImage(img, sx, sy, img.width, img.height, dx, dy, iwidth, iheight);

兼容性

使用了MutationObserver API，低版本浏览器无法使用，自行查看