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。