# @2080code/watermark
![NPM Version](https://img.shields.io/npm/v/%402080code%2Fwatermark?label=NPM%20Version)
![npm package minimized gzipped size](https://img.shields.io/bundlejs/size/%402080code%2Fwatermark?format=both&label=NPM%20Package%20Size)
![NPM Last Update](https://img.shields.io/npm/last-update/%402080code%2Fwatermark?label=NPM%20Last%20Update)
![NPM Downloads](https://img.shields.io/npm/dw/%402080code%2Fwatermark?label=NPM%20Downloads)


## 介绍
基于 CSS 的 `background` 给 HTML 元素添加 SVG 文字水印效果。

---

## 安装
```bash
npm install @2080code/watermark
```
或
```html
<script src="lib/watermark.min.js"></script>
```

---

## 使用
```javascript
import WaterMark from '@2080code/watermark'
```
```javascript
// 创建实例
const Watermarker=new WaterMark({
    mode:'cover',
    content:'西游记',
    fontFamily:'Microsoft YaHei',
    fontSize:'60px',
    fontColor:'black',
    opacity:0.15,
    rotateDegree:-30,
    margin:0,
    padding:40,
    position:'center center',
})
// 绘制水印
Watermarker.draw({
    tuning:false,
    degraded:true,
})
```

---

## 参数
```javascript
const Watermarker=new WaterMark(options)
```

参数|类型|默认值|说明
---|---|---|---
`name` | String | `'2080code-watermark'` | 水印的名称，会影响 cover 模式下水印层元素的 className
`carrierElem` | HTMLElement | `document.body`| 水印层载体。<br/>*需是可添加子元素的元素*
`zIndex` | Number | `1000000` | 水印层（css z-index）
`mode` | String （`'mat'\|'cover'`）| `'mat'` | 水印放置模式，默认 `mat`，铺设在目标层底部；<br/>`cover` 模式会创建一个层，并覆盖在载体上。<br/>*cover 模式下为确保水印覆盖到，请检查载体宽高，mat 模式下水印的打印是非强制的，可能丢失*
`content` | String | `''` | 水印文字内容，与 `url` 互斥，优先级高于 `url`
`url` | String | `''` | 水印资源，与 content 互斥<br/>*暂时不支持`margin`、`padding`、`rotateDegree`及字体等相关设置项*
`fontFamily` | String | `'Hei'` | 字体名
`fontWeight` | String | `'normal'` | 字体粗细
`fontSize` | String | `'16px'` | 字体大小
`fontColor` | String | `'black'` | 字体颜色
`baseline` | String | `'hanging'` | 文本基线设置（svg text alignment-baseline）
`rotateDegree` | Number | `0` | 旋转角度
`size` | String | `'auto'` | 水印尺寸（css background-size）
`margin` | Number | `0` | 水印之间的外间距
`padding` | Number | `0` | 水印之间的内间距
`needClip` | Boolean | `true` | 是否裁切掉水印内容之外的空白（`margin`、`padding` 除外），在设置 `rotateDegree` 时有效
`position` | String | `'center center'` | 水印铺设位置（css background-position）
`repeat` | String | `'repeat'` | 水印铺设方式（css background-repeat）
`opacity` | Number | `0.1` | 透明度，同时影响水印及调试层
`tuning` | Boolean | `false` | 调试模式开关，设为 `true` 会在水印下添加 canvas 画布生成的参照底图，能够观察到 `margin`、`padding`、`rotateDegree`、`baseline` 等参数的辅线，方便调试。<br/>*目前只支持在 cover 模式下开启*
`degraded` | Boolean | `false` | 降级处理，更好的兼容性，默认 `false`。<br/>*canvas 的 `measureText` 本身具有对文字更精确的捕获，但因为兼容性问题，低版本浏览器对它的特性支持不完全，只得以 HTML DOM 的 `getComputedStyle` 取代 canvas `measureText` 来完成基础绘制和尺寸的捕获。*

---

## 方法
### 绘制水印
在声明实例后，调用 `draw` 方法即可绘制水印，`options`会继承实例的参数，但仍会保留在声明实例时设置的参数。
最佳实践是多个水印同屏时声明多个实例。

```javascript
const Watermarker=new WaterMark({
    content:'西游释厄传'
})
Watermarker.draw({
    content:'西游记'
})
```

参数|类型|默认值|说明
---|---|---|---
`options` | WaterMarkTypes.WaterMarkOptions | `{}` | 绘制选项，同创建实例时相同

### 获取水印dataURL
```javascript
const Watermarker=new WaterMark({
    content:'吴承恩'
})
const dataURL=Watermarker.getDataURL()
console.log(dataURL)
```

---

## 效果
### 生产效果
![平铺水印](./demo/preview1.png)
```javascript
{
    mode:'cover',
    content:'西游记',
    fontSize:'60px',
    rotateDegree:-30,
    padding:40,
    needClip:false
}
```
![水印定位](./demo/preview2.jpg)
```javascript
{
    mode:'cover',
    content:new Date().toLocaleString(),
    fontSize:'30px',
    opacity:0.25,
    padding:30,
    size:'40% auto',
    position:'top left',
    repeat:'no-repeat',
}
```
### 调试效果
![调试](./demo/preview_tuning.png)
```javascript
{
    content:'西游释厄传',
    fontSize:'60px',
    rotateDegree:-30,
    margin:30,
    padding:40,
    tuning:true
}
```