🍭gwm.js Generate Watermark 用于生成网页水印,警示信息安全与责任追踪。
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
images
lib
.babelrc
.gitignore
LICENSE
README.md
index.html
package.json
rollup.config.js
yarn.lock

README.md

gwm.js

Generate Watermark

用于内部系统生成水印,可提示信息安全与责任追踪。安全问题不容忽视,对于内部人员敏感操作有一定的提示作用。

特性

  • 支持生成 canvas、svg、element 三种类型水印
  • 支持元素监控,防止篡改
  • 可扩展性强

截图

示例

点击这里查看效果→:Demo示例

使用说明

1、引入 JS 文件

<script src="../js/gwm.js"></script>

或者使用 npm 安装

npm install gwm

2、构建水印

gwm.creation()

参数

参数 默认值 说明
txt date 内部资料 请勿外传 水印文字内容
width 158 水印画布宽度
height 100 水印画布高度
x 0 水印坐标x
y 50 水印坐标y
font 'microsoft yahe' 设置水印字体
fontSize 12 水印字体大小
color #000 水印字体颜色
alpha 0.1 水印字体透明度
angle -15 水印文字倾斜角度
mode canvas 可选参数[canvas, svg, element]
watch true 监控水印元素是否被篡改
篡改后触发重绘
css false 设置水印元素样式
container false 传入一个包裹容器,如:document.getElementById('app'),默认为body

方法

方法 说明
gwm.creation 创建水印。
gwm.observing 手动开启观察者,当水印元素被篡改视,重新渲染水印元素。
gwm.cancel 取消观察者,水印可以被隐藏或删除。

开发环境使用方法

1、安装

npm install

2、在本地运行项目

npm run dev

打开 index.html 预览效果

3、build 命令

npm run build