# ssa_watermark

> global watermark

Latest version **1.4.1** (published 2020-05-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install ssa_watermark
pnpm add ssa_watermark
yarn add ssa_watermark
bun add ssa_watermark
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.1 |
| Published | 2020-05-06 |
| First published | 2019-04-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 24.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wuxing.zz |
| Maintainers | mdzz0722 |

## Links

- npm: https://www.npmjs.com/package/ssa_watermark
- npm.io page: https://npm.io/package/ssa_watermark

## Recent versions

- 1.4.1 (latest) — 2020-05-06
- 1.4.0 — 2020-04-24
- 1.3.0 — 2019-09-19
- 1.2.1 — 2019-06-05
- 1.2.0 — 2019-06-05
- 1.1.0 — 2019-04-18
- 1.0.5 — 2019-04-14
- 1.0.4 — 2019-04-14
- 1.0.3 — 2019-04-14
- 1.0.2 — 2019-04-14
- 1.0.0 — 2019-04-14

## README

## 全局水印

### 效果

ssa_watermark是一个基于canvas生成前端水印js库，同时加入前端水印攻防逻辑，例如当有人恶意篡改水印，可以捕获行为发出警告并记录，同时恢复被篡改的水印.

### 安装 & 使用

1. 安装
```
npm install ssa_watermark --save
```

2. 使用
```js
import watermark from 'ssa_watermark'

watermark({
    text: CookieTool.getItem('_ssa_username'),
    // 水印字体
    fontSize: 16,
    // 水印透明度
    opacity: 0.6,
    // 水印颜色
    color: '#e1e1e1',
    // 水印图片大小控制
    width = 150,
    height = 150,
    // 修改水印回调
    onChange: () => {
        this.$Message.warning('请勿修改水印，你的操作已被记录');
    },
    ignoreAttr: [],
    // 图片生成方式 canvas/svg 建议svg
    generateMethod: 'canvas',
});
```

### Options

1. text： 水印文案
2. fontSize：字体大小
3. opacity：水印透明度
4. color：水印颜色
5. width：生成水印图片宽
6. height： 生成水印图片高
7. onChange：水印节点被修改触发回调
8. ignoreAttr:  (非必填，默认无忽略，全部检测，v1.3.0新增) 节点的这些属性被修改时 忽略检测 
9. generateMethod: 默认canvas，可选canvas或者svg

### FAQ

1、为什么水印有重影?

多半是因为多次调用了 Watermark()；想办法保证只调用一次。

## 跟新

### Feature v1.1.0

1. 新增 **containerDom** 配置，用于配置水印DOM渲染父节点，注意：父节点非body，水印的position属性为absolute
2. 新增 **rotateDegree** 配置，用于调整水印旋转角度，默认值 -15

### Feature v1.2.1

1. 新增zIndex配置，用于控制水印节点z-index属性, 默认值 9999
2. 新增水印销毁函数：在调用watermark之后返回一个对象，挂载destroy函数。 ​

### Feature v1.3.0

1. 新增过滤属性的配置，用于忽略某些难以避免的属性修改

watermark({

    // ... 原有配置不变

    ignoreAttr: ['aria-hidden']

});

### Feature v1.4.0

1. 新增​generateMethod配置，可选svg或者canvas生成水印背景图


​​

---
_Source: https://npm.io/package/ssa_watermark · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._