工具集合

• 方法库

  • 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 图片 |