Skip to content

lxfu1/signature-canvas

Repository files navigation

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.

About

signature canvas, supporting for H5 and PC.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published