galaxy-canvas-sign

galaxy-canvas-sign

一款支持 PC 端，移动端 Canvas 签名插件。

安装使用

npm i galaxy-canvas-sign -s

html:

<div id="canvas-sign">
</div>

js

 const vm = new CanvasSign({
    el:'#signCanvas',        // 在某个节点下插入画板
    width:800,               // canvas 宽度
    height:400,              // canvas 高度
    crop:true,               // 是否裁剪出签名区域
    cropPaddingX:10,         // 裁剪出签名区域水平 padding
    cropPaddingY:10,         // 裁剪出签名区域垂直 padding
    color:'#000',             // 画笔颜色
    lineWidth:2,             // 画笔宽度
    lineCap:'round',         // 笔尖类型
})
vm.init()

属性配置

属性	属性说明	是否必传	默认值
el	画布挂载在哪个节点下，需保证唯一	是	-
width	画布宽度	是	800
height	画布高度	是	400
crop	是否裁剪出实际签名区域	否	false
cropPaddingX	裁剪区域水平留边	否	10
cropPaddingY	裁剪区域垂直留边	否	10
color	画笔颜色	否	#000
lineWidth	画笔宽度	否	2
lineCap	画笔末端类型，同 canvas lineCap	否	round

实例方法

方法	方法说明
init	初始化画布实例之后必须手动调用
clear	清空画布
exportCanvas	导出画布元素方法,返回 canvas，可以调用 toDataURL 等方法
getPoints	返回所有绘制点的坐标数组，可以通过此方法判断用户是否签名

example

npm run dev
PC端：http://localhost:8000/example/pc.html
移动端：http://localhost:8000/example/h5.html

html:

 <div class="container">
        <p>请在下面区域签字</p>
        <div id="signCanvas"></div>
        <div>
            <button class="btn btn-warning" onclick="clearSign()">清空</button>
            <button class="btn btn-primary" onclick="getBase64()">确定</button>
        </div>
    </div>
    <div style="margin-top:8px">
        <img id="imgPreview" style="border: 1px solid gray;"/>
    </div>

js:

const vm = new CanvasSign({
    el:'#signCanvas',        // 在某个节点下插入画板
    width:800,               // canvas 宽度
    height:400,              // canvas 高度
    crop:true,               // 是否裁剪出签名区域
    cropPaddingX:10,         // 裁剪出签名区域水平 padding
    cropPaddingY:10,         // 裁剪出签名区域垂直 padding
    borderStyle:'dashed',    // canvas 边框类型
    color:'red',             // 画笔颜色
    lineWidth:2,             // 画笔宽度
    lineCap:'round',         // 笔尖类型
})

vm.init()

function clearSign(){
    vm.clear()
    const el = document.getElementById("imgPreview")
    el.src = ""
}

function getBase64(){
    if(vm.getPoints().length <=3){
        alert('请先签名！')
        return
    }
    const base64 = vm.exportCanvas().toDataURL("image/png")
    const el = document.getElementById("imgPreview")
    el.src = base64
}

License

Released under MIT LICENSE。