Watermark_store NPM

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