一个基于sign-canvas二次开发的签名板，加入的特性有绘制了签名板的样式在PC端是弹出框，在移动端是全屏横着（点击确定时canvas处理成正的）。用了边缘检测即导出的图片为比名字稍大点的png透明base64。支持国际化。

sign-canvas作者信息：更多文章和技术推文，请关注微信公众号"笔优站长",有问题也可以及时反馈哦！

sign-canvas npm地址：https://www.npmjs.com/package/sign-canvas，仓库地址：https://github.com/langyuxiansheng/vue-sign-canvas

下载

npm i -S vue-signatureboard

更新

@1.1.7 css调整 @1.1.6 写死手机端后同时样式进行强行变更 @1.1.5 加入写死为手机端配置 @1.1.4 按钮间距修改，x的icon背景变成白色 @1.1.3 手机旋转是按钮样式修正 @1.1.2 没想到手机还会旋转！！！，针对手机旋转的情况再写一套css，js在点击时获取是否手机旋转了。如果旋转输出正向图片，未旋转输出倒置图片。 @1.1.1 样式微调 @1.1.0 更改文字间距和按钮间距 @1.0.9 由于签字板阻止默认事件和冒泡，显隐改为直接出现而不是渐变出现 @1.0.8 解决某些手机文字不倒转问题 @1.0.7 关闭按钮修改

全局引入

import sign from 'vue-signatureboard'; import 'vue-signatureboard/lib/vue-signatureboard.css'; // 1.0.5版本及以后不用 Vue.use(sign);

局部引入

import sign from 'vue-signatureboard'; import 'vue-signatureboard/lib/vue-signatureboard.css';// 1.0.5版本及以后不用

components: { sign, }

使用

<sign @confirm="getImage" :is-en="true">

methods: { getImage(base64Img){ console.log(base64Img); } }

API

| 属性 | 说明 | 类型 | 默认值 | 版本 | | ------- | ------------------------------------------------------- | -------- | ------ | ---- | | confirm | 绘制成功后的回调函数，获取的是base64图片 | Function | 无 | | | is-en | 国际化配置，英文true，中文false | Boolean | false | | | scale | 绘制完成后图片比例，例如需要0.5倍大小的签名，:scale=0.5 | Number | 0.5 | | | useMobile | 使用手机端,当值为''时是PC端，不为''时为Mobile端 | String | '' | 1.1.6 |

加入refs后的API

| 函数 | 说明 | 用法 | | ---- | -------------------------------------- | -------------------- | | show | 显示或隐藏签名板,默认隐藏（1.0.6以后） | this.$refs.pf.show() |

其他API请参照sign-canvas