signature-canvas v0.0.5

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

backgroundImage

开发

$ npm install

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

License

MIT license.