Flicker-signature NPM

flicker-signature

更好用的电子签名库，适配桌面端与移动端,

功能

适配桌面端与移动端
支持撤销笔画和恢复笔画
支持倒出base64与blob文件
采用二次贝塞尔曲线优化线条平滑性

下载

npm i flicker-signature

例子

npm.io

使用

基于原生js，适用任何js场景

vue

<template>
	<div>
      <canvas id="myCanvas" ></canvas>
      <button @click="cancelStrokes" > cancelStrokes </button>
    </div>

</template>
<script>
    import FlickerSignature from 'flicker-signature'
	export default {
        data () {
            return {
                fs: null
            }
        },
        mounted () {
            this.initCanvas()
        },
        methods: {
            initCanvas () {
                this.fs = new FlickerSignature(
           			{
                        el: document.getElementById('myCanvas'),
                        options: {
                            backgroundImg: 'grid'
                        }
                  	}
                )
            },
            cancelStrokes () {
                this.fs.cancelStrokes()
            }
        }
    }
</script>

react

import React, {  useLayoutEffect, useRef } from 'react';
import FlickerSignature from 'flicker-signature'

const App = () => {
   
   const canvasRef = useRef(null)
  	
   useLayoutEffect(() => {
    new FlickerSignature(
      {
        el: canvasRef.current!,
        options: {
            backgroundImg: 'grid'
        }
      }
    )
  }, [])
   
   return (
        <div className="App">
          <canvas id='myCanvas' ref={canvasRef} ></canvas>
        </div>
  	);
}

API

flicker-signature的第一个参数是你的canvas节点

第二个参数是配置项

Props（参数）

参数	说明	类型	默认值
lineWidth	线条的宽度	number	2
lineColor	线条颜色	string	#000
backgroundImg	背景颜色，传入grid是白色网格，white是白色背景，可自定义传入图片链接当做背景	string	"grid"

Fn (flicker-signature实例函数)

函数名	说明	参数	参数说明	类型	默认值
cancelStrokes	撤销绘制	一次撤销的步数	string \|number	string \| number	1
recoverStrokes	恢复绘制	一次恢复的步数	string \| number	string \| number	1
clearCanvas	清空画布
toBase64	导出base64	type	base64头部，不传默认是image/png	string \|undefined	无
		quality	质量0-1	number	1
toBlob	导出blob流数据	type	`DOMString` 类型，指定图片格式，默认格式（未指定或不支持）为 `image/png`。	DomString	无
		quality	质量0-1	number	1