# watermark-mini

> 水印插件。

Latest version **1.0.7** (published 2024-09-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install watermark-mini
pnpm add watermark-mini
yarn add watermark-mini
bun add watermark-mini
```

## 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.0.7 |
| Published | 2024-09-29 |
| First published | 2022-05-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 278773844@qq.com |
| Maintainers | colien.cheng |
| Keywords | watermark |

## Links

- npm: https://www.npmjs.com/package/watermark-mini
- Repository: https://github.com/colien/watermark-mini
- Homepage: https://github.com/colien/watermark-mini#readme
- Issues: https://github.com/colien/watermark-mini/issues
- npm.io page: https://npm.io/package/watermark-mini

## Recent versions

- 1.0.7 (latest) — 2024-09-29
- 1.0.6 — 2024-09-25
- 1.0.5 — 2022-05-23
- 1.0.4 — 2022-05-09
- 1.0.3 — 2022-05-09
- 1.0.2 — 2022-05-07
- 1.0.1 — 2022-05-05

## README

# watermark-mini

一个比较轻量级的水印插件。

## 一、浏览器兼容性

主流浏览器都兼容

IE 浏览器 在 11 版本可用，但是不建议监听浏览器的窗口大小变化，因为这会造成浏览器重新渲染水印时卡顿。

IE 11 以下可以渲染，但是会造成用户操作无法穿透水印遮罩，后期会处理这个问题。

## 二、使用方式

### 1. script 引入

```
var WaterMark = window.WaterMark.WaterMark;
new WaterMark({
  content : "haha",
  monitor : false,
}).init();

new WaterMark({
  content : "haha_" + new Date().getTime(),
  fontAlpha : 0.4,
  xSpace : 100,
  ySpace : 100,
  monitor : false,
}).init();

```

### 2. 模块化引入

npm install watermark-mini

new WaterMark(options|Object)

```
const { WaterMark } = require("watermark-mini");
new WaterMark({
  content : "haha",
  monitor : false,
}).init();

new WaterMark({
  content : "haha_" + new Date().getTime(),
  fontAlpha : 0.4,
  xSpace : 100,
  ySpace : 100,
  monitor : false,
}).init();

```

有些时候我们需要同时渲染明水印和盲水印，可以创建两层水印，后期会在一个水印层同时支持多层水印。

## 三、配置参数

options 的参数，以及默认值

```
boxId: 'wm_container_id',       // 水印容器的 div
content: "",                    // 水印内容文字
x: 0,                           // 水平方向上的起始位移
y: 0,                           // 垂直方向上的起始位移
xSpace: 0,                      // 水平方向上水印的间隔
ySpace: 0,                      // 垂直方向上水印的间隔
xPadding:"0px"                  // 水平方向上内边距
yPadding:"0px"                  // 垂直方向上内边距
fontColor: "#000000",           // 水印文字的的字体颜色
fontAlpha: 0.1,                 // 文字颜色透明度
fontSize: "12px",               // 水印文字的大小
fontFamily: "Microsoft Yahei",  // 水印文字的字体类型
rotateAngle: 20,                // 文字的倾斜角度
bgAlpha: 0.1,                   // 背景颜色透明度(暂时无用)
position: 'absolute',           // 水印容器的定位方式
zIndex : 100,                   // 水印定位层级
textAlign : "center",           // 内容文字的对其方式
monitor : true,                 // 是否监听水印内容的变化后重新渲染
containerNode : null,           // 水印插件挂载的父元素 element,不输入则默认挂在body上
coverAreaId : null,             // 覆盖的区域的id （暂时无用）
onLoad : true,                  // 是否监听页面加载完成后渲染
onResize : true,                // 是否监听窗口大小改变后渲染
renderType : 1                  // 渲染方式 1：shadowRoot； 2: canvas； 3：普通元素；
```

## 后期计划

支持在同一水印容器渲染多层水印

支持 IE 11 以下的水印。

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