pearmini / signature-canvas

signature canvas, supporting for H5 and PC.

signature-canvas: 签名插件

Demo

特性

• 开箱即用

• TypeScript

• 支持横屏竖屏

安装

$ npm install signature-canvas

使用

横屏

import Signature from 'signature-canvas';

const signature = new Signature({
  container: 'canvas',
  width: 667,
  height: 375,
});

// 撤销
const unDo = () => {
  signature.undo();
};

// 清除
const clear = () => {
  signature.clear();
};

// 下载
const toData = () => {
  const data = signature.toDataURL();
  console.log(data);
};

<canvas id="canvas" />;

竖屏

import Signature from 'signature-canvas';

const signature = new Signature({
  container: 'canvas',
  width: 667,
  height: 375,
  rotate: 90,
});

const width = 667;
const height = 420;
const style = {
  width,
  height,
  transform: `rotate(90deg) translate(${(width - height) / 2}px, ${(width - height) / 2}px)`,
};
<div style={style}>
  <canvas id="canvas" />
</div>;

API

参数	说明	类型	默认值
container	画布 id 或画布实例	string |  HTMLCanvasElement	-
width	画布宽度	number	400
height	画布高度	number	200
penColor	画笔颜色	string	blank
backgroundColor	画布背景色	string	#fff
rotate	画布旋转角度，支持[0,90,-90,180,-180]	number	0
minWidth	画笔最小值	number	1
maxWidth	画笔最大值	number	4
deafultWidth	画布起始值(每次触碰画布时的大小)，建议不小于最小值，且不大于最大值。	number	3
backgroundImage	画布背景设置	backgroundImage	-
onBegin	开始绘制函数，多次触发	(e: MouseEvent | Touch)=>void	-
onEnd	绘制结束函数，多次触发	(e: MouseEvent |  Touch)=>void	-
clear	清除画布	() => void	-
undo	撤销	() => void	-
toDataURL	获取画布数据，Base64	(type = 'image/png', encoderOptions?: number) => string	-
getHistory	获取画布栈数据	() => string[]	-
isEmpty	判断画布是否为空	() => boolean	-
initData	初始化画布数据，Base64	(string) => void	-
offEvent	取消画布的监听事件	() => void	-

backgroundImage

属性	说明	类型	默认值
src	背景图片地址	string	-
x	背景图距离画布左侧的距离	number	0
y	背景图距离画布上侧的距离	number	0

开发

$ npm install

# build watching file changes and run demos
$ npm run dev

License

MIT license.