Vue2.x ： npm install vue-online-signature --save
Vue2.x gitee链接 https://gitee.com/awfifnypm/vue-online-signature
Vue3.x npm install vue3-online-signature --save
Vue3.x gitee链接 https://gitee.com/awfifnypm/vue3-online-signature
兼容 PC 和 Mobile；
屏幕旋转自适应自定义画布屏幕大小（屏幕旋转后竖屏与横屏数据互通）；
自定义画布尺寸（尺寸可通过获取id元素，幕屏尺寸，自定义宽高），画笔粗细、颜色，画布背景色；
支持裁剪 （针对需求：有的签字需要裁剪掉四周空白）。
自定义导出图旋转角度
自定义画布背景（支持图片及图片背景重复）
自定义导出图背景（支持图片及图片背景重复，可生成与画布背景不一样背景的图片）
初始化布画恢复历史绘制数据或在已经的画布上恢复历史绘制数据
导出图片格式为 base64； 示例demo
注： 本组件是基于vue-esign插件基础上进行二开和修改，使用方法与vue-esign插件有差异，建议查看本插件文档
npminstall vue-online-signature--save
引入 组件
import vueSignature from 'vue-online-signature'
页面中使用 必须设置 ref ，用来调用组件内暴露的内置方法 reset() 和 confirm()
自定义的宽度超出屏幕宽度的话，组件样式宽度则是父元素的100%；
组件所有参数都非必填，组件emit出部份内置方法，具体查看下面说明文档
<vueSignatureref="vueSignatureRef"v-bind="params"/>
<button@click="handleReset">清空画板</button>
<button@click="handleGenerate">生成图片</button>
data(){
return{
resultImg:'',
params:{
width:0,
height:0,
lineWidth:5,
lineColor:'',
canvasBack:'',
isCrop:false,
edg:0,
fullScreen:false,
domId:'',
imgBack:'',
isRepeat:'',
noRotation:false,
backIsCenter:false
}
}
}
methods:{
handleReset(){
this.$refs.vueSignatureRef.reset()
},
handleGenerate(){
this.$refs.vueSignatureRef.confirm()
.then(res=>{
this.resultImg=res
})
.catch(err=>{
alert(err)
// 画布没有签字时会执行这里 'Not Signned'
})
}
}
说明
详情文档请查看git仓库README.md文档
