# the-watermark

> Add watermark to web page.

Latest version **0.0.4** (published 2022-09-02) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2022-09-02 |
| First published | 2022-08-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 41.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | sikychen |
| Maintainers | sikychen |
| Keywords | watermark, the-watermark, javascript |

## Links

- npm: https://www.npmjs.com/package/the-watermark
- Repository: https://github.com/SikyChen/the-watermark
- npm.io page: https://npm.io/package/the-watermark

## Recent versions

- 0.0.4 (latest) — 2022-09-02
- 0.0.3 — 2022-09-02
- 0.0.2 — 2022-08-24

## README

# the-watermark

[![NPM](https://img.shields.io/npm/v/the-watermark.svg)](https://www.npmjs.com/package/the-watermark) 

在网页中添加水印。

基本原理是通过 canvas 生成一张水印图片并转为 dataUrl ，通过 background-image 的方式挂到水印 dom 元素上。最后 append 到指定的容器中。

## 使用

``` html
<script src="./lib/the-watermark.js"></script>

<script>
  new Watermark();
</script>
```

``` javascript
import Watermark from "the-watermark";

new Watermark({
  container: document.querySelector('.section'),
  content: 'the-watermark',
});
```

## 配置

| Name          | Describe  | Type | Default |
| ----          | ----      | :--: | :--: |
| container     | 待挂载的容器，如果不指定，则默认为 body | DOM | body |
| content       | 水印需要显示的文本 | string | "watermark" |
| width         | 每个水印文本所占空间的宽度。可以理解为用于控制水印横向的密度 | number | 300 |
| height        | 每个水印文本所占空间的高度。可以理解为用于控制水印纵向的密度 | number | 200 |
| zIndex        | CSS 的 zIndex | number | 1000 |
| font          | 同 canvas 用法的 font，控制水印文本的文字样式 | string | "28px auto" |
| textAlign     | 同 canvas 用法的 textAlign，控制文本显示位置， | string | "center" |
| textBaseline  | 同 canvas 用法的 textBaseline，控制文本显示位置 | string | "middle" |
| color         | 同 canvas 用法的 color，控制文本颜色和透明度 | string | "rgba(200, 200, 200, 0.2)" |
| rotate        | 文本旋转角度 | number | -34 |

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