2.0.0 • Published 2 years ago
watermark-for-vue v2.0.0
安装
npm install watermark-for-vue
使用方式
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,低版本浏览器无法使用,自行查看