watermark-store

watermark.js是基于Dom对象实现的打水印系统，有文字和图片两种模式。水印采用动态计算，可实时更新属性并重新添加，水印dom外层设有保护dom，实时计算最小宽高，防止水印重叠。

use

npm i watermark_store
import Watermark from 'watermark_store'

//文字水印-单个
new Watermark({
    marktype: 1,
    txt:"文字水印单个",
    type: 'single',
    x:'50%',
    y:200
})

// 文字水印-平铺
new Watermark({
    marktype: 1,
    txt:"文字水印平铺",
    type: 'tile',
    start_x:10,//水印起始位置x轴坐标
    start_y:10,//水印起始位置Y轴坐标
    x_space:30,//水印x轴间隔
    y_space:30,//水印y轴间隔
})

//图片水印-单个 必须提供图片src
new Watermark({
    marktype: 2,
    src: './demo.png',
    type: 'single',
    x:'50%',
    y: '50%'
})

//图片水印-平铺
new Watermark({
    marktype: 2,
    src: './demo.png',
    type: 'tile',
    start_x:10,//水印起始位置x轴坐标
    start_y:10,//水印起始位置Y轴坐标
    x_space:30,//水印x轴间隔
    y_space:30,//水印y轴间隔
})

//隐形水印 1开启 2关闭 隐形水印通过图片处理工具加深颜色即可查看
new Watermark({
    marktype: 1,
    txt:"文字水印平铺",
    type: 'tile',
    start_x:10,//水印起始位置x轴坐标
    start_y:10,//水印起始位置Y轴坐标
    x_space:30,//水印x轴间隔
    y_space:30,//水印y轴间隔
    hidden:2,//隐形水印 
    hidden_text:'版权所有 盗版必究',//隐形水印文字
})

api

|属性 | 说明 | 默认值 | 可选 | 备注 | | ------------ | ------------ | ------------ | ------------ | ------------ | | el | 水印载体 | document.body | document.body 或 document.getElementById(id) | 水印载体，默认Body | | marktype | 水印类型 | 1 | 1 或 2 | 1-文字 2-图片 | | type | 水印添加形式 | single | single 或 tile | single-单个 tile-平铺 | | txt | 水印文字 | 我是水印 | 可编辑 | | | x | 水印起始位置x轴坐标 | 10 | 可编辑 | | | y | 水印起始位置Y轴坐标 | 10 | 可编辑 | | | rows | 水印行数 | 100 | | 自动计算 | | cols | 水印列数 | 100 | | 自动计算 | | x_space | x轴间隔 | 70 | 可编辑 | | | y_space | y轴间隔 | 70 | 可编辑 | | | color | 字体颜色 | #000 | 可编辑 | | | alpha | 透明度 | 0.1 | 可编辑 | | | fontsize | 字体大小 | 20 | 可编辑 | | | fontweight | 字体字重 | 400 | 可编辑 | | | fontstyle | 字体样式 | nomal | normal 或 itality | | | font | 字体 | 微软雅黑 | 可编辑 | | | angle | 倾斜度数 | 17 | 可编辑 | | | src | 图片链接 | none | 可编辑 | | | scale | 图片缩放 | 原始大小 | 可编辑 | 0.5-5 | | hidden | 隐形水印 | 1 | 1 或 2 | 1-开启 2-关闭 | | hidden_text | 隐形水印文字 | 版权所有 盗版必究 | 可编辑 | | | monitor | 水印防删除 | false | true/false | |