Git Product home page Git Product logo

gwm's Introduction

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 监控水印元素是否被篡改
篡改后触发重绘

方法

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

开发环境使用方法

1、安装

npm install

2、在本地运行项目

npm run dev

打开 index.html 预览效果

3、build 命令

npm run build

gwm's People

Contributors

loadchange avatar

Watchers

annlei avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.