vue签字/签名板 online-signature

版本

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文档