web-watermark's Introduction

web-watermark

网页水印

Install

npm install web-watermark
or
yarn add web-watermark

Featrue

支持 Canvas 或 SVG 渲染水印；
Canvas 支持 Retina 高清显示；

Usage

import Watermark from 'web-watermark'

new Watermark({
  mode: 'canvas', // default
  container: document.body, // default
  watch: true, // default
  text: '敏感信息请勿泄漏', // default
  x: 0, // default
  y: 50, // default
  width: 150, // default
  height: 100, // default
  color: '#000', // default
  fontSize: 12, // default
  fontStyle: 'normal', // default
  fontFamily: 'sans-serif', // default
  alpha: 0.15, // default
  deg: -15, // default
}).render()

Config

参数	取值	说明
mode	String: 'canvas'	水印渲染的模式，可选 'canvas' 或 'svg' 渲染
container	Node: document.body	需要渲染水印的元素，默认为 body，即整个页面渲染
watch	Boolean: true	监听水印元素是否被篡改，被修改或者删除等操作，则重新渲染水印
text	String: '敏感信息请勿泄漏'	水印信息
x	Number: 0	水印 x 轴偏移量，用于微调水印位置
y	Number: 50	水印 y 轴偏移量，用于微调水印位置
width	Number: 150	水印图片的宽度
height	Number: 100	水印图片的高度
color	String: '#000'	水印字体颜色
fontSize	Number: 12	水印字体大小
fontFamily	String: 'sans-serif''	水印字体
fontStyle	String: 'normal'	水印字体样式，可选值和 CSS font-style 相同
alpha	Number: 0.15	水印透明度
deg	Number: -15	水印的倾斜角度，顺时针方向角度增加，以9点钟方向为0度
debugger	Boolean: false	是否开启调试模式

Methods

实例方法	参数	说明
render(options)	配置参数，如果传递了配置参数，会合并最近的配置	渲染水印，调用此函数才会生成水印
destroy()	-	销毁水印

web-watermark's People

Contributors

Stargazers

Watchers

web-watermark's Issues

请求增加 d.ts 类型声明文件

目的是为了方便在 TypeScript 项目中使用。

下面是我在TS项目中为 web-watermark 写的声明定义，供参考

declare module 'web-watermark' {
  type WatermarkOptions = {
    mode?: 'canvas' | 'svg'
    container?: Element
    watch?: boolean
    text?: string
    x?: number
    y?: number
    width?: number
    height?: number
    color?: string
    fontSize?: number
    fontStyle?: string
    fontFamily?: string
    alpha?: number
    deg?: number
    debug?: boolean
  }
  class Watermark {
    constructor(options?: WatermarkOptions)
    render(options?: WatermarkOptions): void
    destroy(): void
  }

  export default Watermark
  export { WatermarkOptions }
}