Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

autograph-canvas

lsm1997122210ISC1.0.3

用canvas实现签名

canvas, autograph, 签名, 在线签名

readme

canvas-autograph

describe

  该插件可以,实现在线签名功能
  可以通过配置相关参数,配置画布的大小,文字颜色等功能

use

1.安装
  npm i autograph-canvas

2.导入
  const autograph = require('autograph-canvas')

3.导入样式
  import('autograph-canvas/dist.index.css')

4.调用
  const ele = autograph(params)

params

autograph接收一个对象,对象中可以设置如下参数
  1.canvasWidth: 画布宽度
  2.canvasHeight: 画布高度(并非整个签名模块的高度)
  3.imgType: 保存的图片类型(1.image/jpeg 2.image/png),如果不传默认为image/png
  4.textColor: 签名的文字颜色
  5.saveCb: 点击保存按钮时候的回调函数

example

import canvasAutograph from './autograph.js'

import './index.less'

const ele = canvasAutograph({
  canvasWidth:500,
  canvasHeight:250 ,
  textColor: 'red',
  imgType: 'image/jpeg'
  saveCb: (res) => {
    console.log('图片的url', res)
  }
})
document.body.appendChild(ele)

question

1.默认情况下,点击保存签名,除了返回图片url,还会下载图片,未做控制,待优化
2.保存图片之后,默认清除画布,未做控制,待优化
3.不兼容H5