galaxy-canvas-sign/readme.md

银河集团Canvas签名sdk

## 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:
```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:
```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。