# watermark

**Repository Path**: xiaoyanit/watermark

## Basic Information

- **Project Name**: watermark
- **Description**: 用于前端给图片添加文字或二维码水印
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2022-12-28
- **Last Updated**: 2022-12-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# watermark

#### 介绍
用于给图片添加文字或二维码水印，或同时添加文字和二维码水印

#### 软件架构
JavaScript

#### 快速上手

1. 引入js

   ```html
   <script src="../lib/qrcode.min.js"></script>
   <script src="../src/watermark.min.js"></script>
   ```

2. 直接使用

   ```javascript
   fileInput.onchange = async () => {
       let file = fileInput.files[0]
       // blob对象可以用来上传
       const blob = await Watermark.attachAll(file, {
           textContent: '水印内容'
       })
       // img元素,可以用来展示
       const result = await Watermark.blobToImg(blob)
   }
   ```

#### 方法

##### 同时为图片添加图片和二维码水印

###### Watermark.attachAll(imgFile,options):Promise`<Blob>`

| 参数                  | 类型               | 必填 | 默认值                                  | 说明                                                         |
| --------------------- | ------------------ | ---- | --------------------------------------- | ------------------------------------------------------------ |
| imgFile               | File               | 是   | 无                                      | 图片File对象                                                 |
| options               | Object             | 是   | 无                                      | 配置对象                                                     |
| options.font          | String             | 否   | 24px 宋体                               | 文字字体                                                     |
| options.textColor     | String             | 否   | #FFC82C                                 | 文字颜色                                                     |
| options.textAlign     | String             | 否   | right                                   | 文字对其方式                                                 |
| options.textContent   | String             | 是   | 无                                      | 水印文字内容                                                 |
| options.textPos       | Number[]\|function | 否   | [canvas.width - 20, canvas.height - 20] | 文字位置,[x,y],默认在右下角<br />如果是函数,入参为canvas元素和二维码尺寸 |
| options.qrcodeContent | String             | 否   | textContent                             | 二维码内容                                                   |
| options.qrcodeSize    | Number[]           | 否   | 图片长边*qrcodeRatio                    | 二维码尺寸,[宽,高]<br />未指定的情况下尺寸最大为[256,256]    |
| options.qrcodeRatio   | Number             | 否   | 0.16                                    | 二维码占原图片长边的比例,在未指定尺寸时生效                  |
| options.qrcodePos     | Number[]\|function | 否   | [20, 图像高 - 二维码尺寸 - 20]          | 二维码位置,[图片x轴左上角坐标,图片y轴左上角坐标],默认在左下角<br />如果是函数,入参为canvas元素和二维码尺寸 |

##### 为图片添加文字水印

###### Watermark.attachText(imgFile,options):Promise`<Blob>`

| 参数                | 类型               | 必填 | 默认值                                  | 说明                                                         |
| ------------------- | ------------------ | ---- | --------------------------------------- | ------------------------------------------------------------ |
| imgFile             | File               | 是   | 无                                      | 图片File对象                                                 |
| options             | Object             | 是   | 无                                      | 配置对象                                                     |
| options.font        | String             | 否   | 24px 宋体                               | 文字字体                                                     |
| options.textColor   | String             | 否   | #FFC82C                                 | 文字颜色                                                     |
| options.textAlign   | String             | 否   | right                                   | 文字对其方式                                                 |
| options.textContent | String             | 是   | 无                                      | 水印文字内容                                                 |
| options.textPos     | Number[]\|function | 否   | [canvas.width - 20, canvas.height - 20] | 文字位置,[x,y],默认在右下角<br />如果是函数,入参为canvas元素和二维码尺寸 |

##### 为图片添加二维码水印

###### Watermark.attachQRCode(imgFile,options):Promise`<Blob>`

| 参数                  | 类型               | 必填 | 默认值                         | 说明                                                         |
| --------------------- | ------------------ | ---- | ------------------------------ | ------------------------------------------------------------ |
| imgFile               | File               | 是   | 无                             | 图片File对象                                                 |
| options               | Object             | 是   | 无                             | 配置对象                                                     |
| options.qrcodeContent | String             | 否   | textContent                    | 二维码内容                                                   |
| options.qrcodeSize    | Number[]           | 否   | 图片长边*qrcodeRatio           | 二维码尺寸,[宽,高]<br />未指定的情况下尺寸最大为[256,256]    |
| options.qrcodeRatio   | Number             | 否   | 0.16                           | 二维码占原图片长边的比例,在未指定尺寸时生效                  |
| options.qrcodePos     | Number[]\|function | 否   | [20, 图像高 - 二维码尺寸 - 20] | 二维码位置,[图片x轴左上角坐标,图片y轴左上角坐标],默认在左下角<br />如果是函数,入参为canvas元素和二维码尺寸 |

##### 将blob对象转换为HTMLImageElement对象

###### Watermark.blobToImg(blob):Promise`<HTMLImageElement>`

| 参数 | 类型 | 必填 | 默认值 | 说明         |
| ---- | ---- | ---- | ------ | ------------ |
| blob | Blob | 是   | 无     | 图片blob对象 |

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)