# pioneer-canvas-utils-example

**Repository Path**: jun96/pioneer-canvas-utils-example

## Basic Information

- **Project Name**: pioneer-canvas-utils-example
- **Description**: canvas工具库pioneer-canvas-utils的使用样例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-21
- **Last Updated**: 2024-11-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# canvas 工具库 pioneer-canvas-utils 的样例项目

- 引入 `npm i pioneer-canvas-utils`

- 最新文档：https://www.npmjs.com/package/pioneer-canvas-utils

# 项目运行
- `npm i`
- `npm run dev`

# 工具集合

- 方法库

  - fileToBse64 将图片文件转换为 base64 码
  - downloadImg 下载图片

- 签名
  - 封装的一个 ts 签名库，PC 端、移动端通用，支持签名，签名回显，保存签名区域为 png 图片等功能
- 图片添加水印
  - 将图片添加水印，可以设置水印文字，水印图片，水印位置，水印透明度等

# react 使用样例

- https://gitee.com/jun96/pioneer-canvas-utils-example

# 方法库

- fileToBase64 将文件转换为 base64 码

```
import {fileToBase64} from 'pioneer-canvas-utils'

const file = e.target.files[0]  // 获取图片file对象
const base64 = await fileToBase64(file)
console.log('base64', base64)
```

- downloadImg

```
import {downloadImg} from 'pioneer-canvas-utils'

const url = 'base64'
const name = 'xxx.jpg'
downloadImg(url, name)
```

# 签名

```
import {Sign} from 'pioneer-canvas-utils'

const optins = {
	canvas,
	tracks,
	isEdit,
	color,
	lineHeight
}
const sign = new Sign(optins)

const signData = sign.getSignData()
sign.saveToImg(name)
sign.revoke()
sign.clear()
sign.destroy()
```

## 文档

### options 参数

| 参数名     | 是否必须 | 描述           | 默认值 | 类型    |
| ---------- | -------- | -------------- | ------ | ------- |
| canvas     | 是       | canvas dom     | --     | --      |
| tracks     | 否       | 回显的签名数据 | --     | --      |
| isEdit     | 否       | 是否可以编辑   | true   | boolean |
| color      | 否       | 签名颜色       | black  | string  |
| lineHeight | 否       | 签名线宽       | 1      | number  |

### 方法

| 方法名          | 描述                             | 入参               | return   |
| --------------- | -------------------------------- | ------------------ | -------- |
| getSignData()   | 获取签名数据                     | 无                 | 签名数据 |
| getImgBase64()  | 获取签名图片的 base64 码         | 无                 | base64   |
| saveToImg(name) | 将签名最小区域保存为 png 图片    | name：保存的文件名 | 无       |
| revoke()        | 撤销最后一笔                     | 无                 | 无       |
| clear()         | 清空签名                         | 无                 | 无       |
| destroy()       | 销毁 Sign 中的事件，避免内存泄漏 | 无                 | 无       |

# 图片添加水印

```
import {Watermark} from 'pioneer-canvas-utils'

const options = {
	url: string; // 图片http地址或base64
  text: string; // 水印文字
  angle?: number; // 水印文字倾斜角度
  fillStyle?: string; // 水印文字颜色
  fontSize?: number; // 水印文字大小
  gap?: number; // 水印文字间隙系数
}
const base64 = await Watermark.create(options)
console.log('添加水印后的图片', base64)
```

## 文档

### options 参数

| 参数名    | 是否必须 | 描述                    | 默认值             | 类型   |
| --------- | -------- | ----------------------- | ------------------ | ------ |
| url       | 是       | 图片 http 地址或 base64 | --                 | string |
| text      | 是       | 水印文字                | --                 | string |
| angle     | 否       | 水印文字倾斜角度        | -15                | number |
| fillStyle | 否       | 水印文字颜色            | rgba(0, 0, 0, 0.2) | string |
| fontSize  | 否       | 水印文字大小            | 12                 | number |
| gap       | 否       | 水印文字间隙系数        | 20                 | number |

### 静态方法

| 事方法名 | 描述                        | 入参    | 返回                                 |
| -------- | --------------------------- | ------- | ------------------------------------ |
| create   | 获取加好水印后的图片 base64 | options | promise 返回加好水印后的 base64 图片 |