npm package: @pagoda-tools/image-watermark
Description: watermarkjs 工具扩展功能
Latest version: 1.0.5

# @pagoda-tools/image-watermark

针对 [`watermarkjs`](http://brianium.github.io/watermarkjs/) 工具，扩展文字水印平铺功能

用于在浏览器中为图像添加水印的功能库。使用 ES6 编写，并通过 Babel 提供给当前的浏览器。支持 URL、文件输入、Blob 和页面图像。

## 经测试的浏览器

任何支持文件和文件读取器的浏览器都应该可以工作。以下浏览器已经过测试并正常工作：

- IE10 (Windows 7)
- Chrome 42 (OS X 10.10.3)
- Firefox 38 (OS X 10.10.3)
- Safari 8.0.6 (OS X 10.10.3)
- Opera 29.0 (OS X 10.10.3)

请随时更新此列表或通过拉取请求提交特定浏览器的修复程序。

## 安装

`@pagoda-tools/image-watermark`可通过`npm`和`yarn`获得：

```shell
# install via npm
npm install @pagoda-tools/image-watermark -S

# install via yarn
yarn add @pagoda-tools/image-watermark -S
```

## 用法

引入

```javascript
// 本地路径水印
import { watermark, textExpand } from '@pagoda-tools/image-watermark';

// 兼容
import watermark, {
  textRepeat,
  textCustomizeCenter,
} from '@pagoda-tools/image-watermark';
```

### 加载一个 url 和 文件对象

```javascript
const file = document.querySelector('input[type=file]').files[0];

// 加载一个 url 和 文件对象
watermark([file])
  .image(textExpand.repeat({ text: '示范例子', degree: 45 })) // 兼容 textRepeat
  .then((img) => document.getElementById('container').appendChild(img));

// 来自远程源的水印
const options = {
  init(img) {
    img.crossOrigin = 'anonymous';
  },
};

watermark(['https://host.com/photo.jpg'], options)
  .image(textExpand.repeat({ text: '示范例子', degree: 45 })) // 兼容 textRepeat
  .then((img) => document.getElementById('container').appendChild(img));
```

### 生成`Blob`或`File`对象上传

```javascript
watermark([file])
  .blob(textExpand.repeat({ text: '示范例子', degree: 45 }))
  .then((blob) => {
    // 一、上传需要的 Blob 对象。
    console.log(blob); // 可用于 cos 上传
    // 二、上传所需的 File 对象
    const file = new File([blob], fileName, { type: mimeType });
  });
```

### `textRepeat`（平铺水印）`与textCustomizeCenter`（文字居中-可设置角度）

##### 引入

```javascript
import { watermark, textExpand } from '@pagoda-tools/image-watermark';
```

##### 参数说明

| 参数名 | 参数描述 | 类型 | 是否必填 | 版本 |
| --- | --- | --- | --- | --- |
| text | 水印文字 | string | 是 |
| font | 字体，只支持浏览器字体，缺省值为`microsoft yahei` | string | 否 |  |
| fontSize | 字体大小，缺省值为 20 | number | 否 |  |
| degree | 文字水印的旋转角度设置，取值范围为 0 - 360，缺省值为 0) | number | 否 |  |
| dx | 水平（横轴）边距，单位为像素，缺省值为 20 | number | 否 |  |
| dy | 垂直（纵轴）边距，单位为像素，缺省值为 20 | number | 否 |  |
| fill | 字体颜色，缺省为灰色(#3D3D3D)，需设置为十六进制 RGB 格式 | string | 否 |  |
| strokeStyle | 描边颜色，缺省为灰色(#FFF)，需设置为十六进制 RGB 格式 | string | 否 | ^1.0.4 |
| dissolve | 文字透明度，取值 1 - 100 ，默认 40（40%不透明度） | number | 否 |  |
| repetition | 重复方向，默认：repeat 该模式在水平和垂直方向重复。<br/> `textRepeat` 方法有生效 | `repeat`、`repeat-x` 、`repeat-y` 、`no-repeat`; | 否 |  |

## Method

opts：查看 - 参数说明

### textExpand 扩展方法`^1.0.4`

```js
textExpand.repeat(opts); // 平铺
textExpand.center(opts); // 居中
textExpand.lowerRight(opts); // 右下角
textExpand.lowerLeft(opts); // 左下角
textExpand.upperRight(opts); // 右上角
textExpand.upperLeft(opts); // 左上角
textExpand.upperCenter(opts); // 正上方
textExpand.lowerCenter(opts); // 正下方
textExpand.leftCenter(opts); // 正左方
textExpand.rightCenter(opts); // 正右方
```

## Examples

这些示例演示如何使用水印图像和文本，以及将带水印的图像上传到腾讯云 COS 的演示。

- [watermarkjs 官网](http://brianium.github.io/watermarkjs/)
- [watermarkjs npm](https://www.npmjs.com/package/watermarkjs)