0.1.2 • Published 1 year ago
vue2-watermark v0.1.2
vue2-watermark
安装
npm i vue2-watermark使用方式
import Watermark from "vue2-watermark";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为空的时候，不进行渲染
options: {}, // 不进行渲染- 目前已经初始化高度
200。
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 | array | array |
| gap | 内容为数组时，每行之间的间隙 | number | 20 | |
| globalAlpha | 设置图形和图像透明度的值 | number | 0.2 | |
| rotate | 旋转角度 | number | 16 | |
| repeat | 水印重复属性 | string | repeat | |
| zIndex | 层级权重 | number | 99 | |
| 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，低版本浏览器无法使用，自行查看