一个基于canvas开发,封装于Vue组件的通用手写签名板(电子签名板),支持pc端和移动端,属性支持自定义配置
npm i sign-canvas --save
//全局注册 main.js import SignCanvas from 'sign-canvas';Vue.use(SignCanvas);
//局部注册 import SignCanvas from 'sign-canvas';
components:{ SignCanvas }
你可以这样使用:
props:{ options: { //配置项 required: false, type: [Object], default: () => null } }// 1. options [Object] 可选,非必传
// 2. v-model [String] 可选,非必传
配置项 options 属性
javascript { isDpr: false, //是否使用dpr兼容高倍屏 [Boolean] 可选 lastWriteSpeed: 1, //书写速度 [Number] 可选 lastWriteWidth: 2, //下笔的宽度 [Number] 可选 lineCap: 'round', //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square] 正方形线帽 lineJoin: 'bevel', //线条交汇时边角的类型 [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。 canvasWidth: 350, //canvas宽高 [Number] 可选 canvasHeight: 370, //高度 [Number] 可选 isShowBorder: true, //是否显示边框 [可选] bgColor: '#fcc', //背景色 [String] 可选 borderWidth: 1, // 网格线宽度 [Number] 可选 borderColor: "#ff787f", //网格颜色 [String] 可选 writeWidth: 5, //基础轨迹宽度 [Number] 可选 maxWriteWidth: 30, // 写字模式最大线宽 [Number] 可选 minWriteWidth: 5, // 写字模式最小线宽 [Number] 可选 writeColor: '#101010', // 轨迹颜色 [String] 可选 isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框 imgType:'png' //下载的图片格式 [String] 可选为 jpeg canvas本是透明背景的 }
内置方法 ```javascript //清除画布 无返回值 [Void] this.$refs.SignCanvas.canvasClear();
//获取base图片 返回图片的base64编码 [String] this.$refs.SignCanvas.saveAsImg();
//下载图片到本地, 调用内置的下载图片方法,默认将图片保存为png格式(经测试在部分微信内置浏览器中无效) this.$refs.SignCanvas.downloadSignImg();
## [在线演示](https://langyuxiansheng.github.io/vue-sign-canvas/) ### 图片展示 ---初始化展示
非签名模式书写展示
保存展示
下载的图片展示
签名模式的图片展示
更多功能正在完善中......
如果您有什么好的建议请留言
二次开发 下载项目
```bash git clone https://github.com/langyuxiansheng/vue-sign-canvas.git
cd vue-sign-canvasnpm install
npm run dev
npm run build
npm run lint
目前还没有撤销回到上一步的操作,一旦输入错了就只有清除重写了(这个是之前去银行的时候,那个签名板是这样设计的); 如果有需要还是可以考虑加上回到上一步的方法.
v1.1.3 功能更新:增加高倍屏下,绘制会模糊的适配方案,可以通过options.isDpr属性进行开启或者关闭,感谢网友“Wong-Harry”的建议与反馈。
v1.1.2 优化部分逻辑代码.
v1.1.1 修复background 拼写错误,感谢网友"shady-xia"的反馈和建议.
v1.1.0 本次更新调整较大,内容如下: - 调整局部组件注册的逻辑,全局使用的不收影响,如果有局部注册的朋友请调整一下. - 调整demo样式,增加动态配置项,属性支持动态响应了; - 修复滚动距离导致画点偏移的bug,优化核心代码,感谢网友“Jayj1997”的建议和反馈。
v1.0.7 修复定位下的轨迹偏移,受position属性的影响的bug。感谢网友“gexiaoyun” 和 “xingguyue”的反馈。
v1.0.6 修复多个canvas无法同时存在的bug,修复移动端滚动后影响绘制轨迹的bug。感谢网友“hytao2017”的反馈。
v1.0.5 优化部分代码。
v1.0.4 修复增加局部注册引入方式。
v1.0.3 修复“在移动端时,如果标签距离左侧有间距, 画笔和绘制的内容有偏移 #4”的bug,感谢网友“xiaohuyahappy ”和“tzy19920902”的bug反馈见及修复建议。
v1.0.2 兼容移动端的可用性
v1.0.1 修复无法清空的bug
v1.0.0 注册发布到npmjs