https://github.com/hjyker/web-watermark

Watermark for web page
https://github.com/hjyker/web-watermark

Last synced: about 1 month ago
JSON representation

Watermark for web page

• Host: GitHub
• URL: https://github.com/hjyker/web-watermark
• Owner: hjyker
• Created: 2018-11-02T11:20:47.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T16:36:17.000Z (almost 2 years ago)
• Last Synced: 2024-09-20T08:35:08.570Z (3 months ago)
• Language: JavaScript
• Size: 2.01 MB
• Stars: 15
• Watchers: 2
• Forks: 4
• Open Issues: 16
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-web - web-watermark

README

        


  
web-watermark



[![npm](https://img.shields.io/npm/v/web-watermark)](https://www.npmjs.com/package/web-watermark) ![](https://img.shields.io/bundlephobia/minzip/web-watermark) ![](https://img.shields.io/npm/dt/web-watermark) 



  
网页水印



Install


```bash

npm install web-watermark

or

yarn add web-watermark

```

Featrue


1. 支持 Canvas 或 SVG 渲染水印；

2. Canvas 支持 Retina 高清显示；

Usage


```javascript

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() | - | 销毁水印 |