0.0.5 • Published 1 year ago
galaxy-canvas-sign v0.0.5
galaxy-canvas-sign
一款支持 PC 端，移动端 Canvas 签名插件。
安装使用
npm i galaxy-canvas-sign -shtml:
<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.htmlhtml:
<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。