vue3-online-signature

Canvas 手写签字/签名板

本组件使用Vue3.x版本开发，Vue3.x必须使用vue3-online-signature，如果使用Vue2.x版本的项目，请使用Vue2.x版本组件

版本提示

1. Vue2.x npm链接 或 npm install vue-online-signature --save
2. Vue2.x gitee链接 https://gitee.com/awfifnypm/vue-online-signature

功能

1. 兼容 PC 和 Mobile；
2. 屏幕旋转自适应自定义画布屏幕大小（屏幕旋转后竖屏与横屏数据互通）；
3. 自定义画布尺寸（尺寸可通过获取id元素，幕屏尺寸，自定义宽高），画笔粗细、颜色，画布背景色；
4. 支持裁剪 （针对需求：有的签字需要裁剪掉四周空白）。
5. 自定义导出图旋转角度
6. 自定义画布背景（支持图片及图片背景重复）
7. 自定义导出图背景（支持图片及图片背景重复，可生成与画布背景不一样背景的图片）
8. 导出图片格式为 base64；
9. 初始化布画恢复历史绘制数据或在已经的画布上恢复历史绘制数据 示例demo

注： 本组件是基于vue-esign插件基础上进行二开和修改，使用方法与vue-esign插件有差异，建议查看本插件文档

安装

npm install vue3-online-signature --save

使用

1. 引入 main.js 获vue页面引入

import vueSignature from 'vue3-online-signature'

2. 页面中使用 必须设置 ref ，用来调用组件内暴露的内置方法 reset() 和 confirm() 自定义的宽度超出屏幕宽度的话，组件样式宽度则是父元素的100%； 组件所有参数都非必填，组件emit出部份内置方法，具体查看下面说明文档

<vueSignature ref="vueSignatureRef" v-bind="params"/>
<button @click="handleReset">清空画板</button> 
<button @click="handleGenerate">生成图片</button>

const resultImg = ''
const params = reactive<object>({
    width: 0,
    height: 0,
    lineWidth: 5,
    lineColor: '',
    canvasBack: '',
    isCrop: false,
    edg: 0,
    fullScreen: true,
    domId: '',
    imgBack: '',
    isRepeat: '',
    noRotation: false,
    backIsCenter: false,
    recoverPoints: []
  })
let vueSignatureRef = ref<any>(null)
const handleReset = () => {
    vueSignatureRef.value.reset()
  },
const = handleGenerate = () => {
    vueSignatureRef.value.confirm()
    .then((res:{base64: string, points: any}) => {
        imagesSRC.value = res.base64
        sessionStorage.setItem('points', JSON.stringify(res.points))
    })
    .catch(err => {
      alert(err) // 画布没有签字时会执行这里 'Not Signned'
    })
  }

3. 说明

| 属性 | 类型 | 默认值 | 说明 | | :-: | :-- | :-: | :-- | | domId | String | 空 | 用于获取元素的宽高生成画布尺寸，优先级一级（建议使用canvas父级元素的ID, 父级元素的width值不可大于当前屏幕的宽度） | | fullScreen | Boolean | false | 是否获取屏幕的宽高生成画布尺寸，优先级二级 | | width | Number | 0 | 画布宽度，优先级三级 (此值不可大于当前屏幕的宽度) | | height | Number | 0 | 画布高度，优先级三级 | | lineWidth | Number | 4 | 画笔粗细 | | lineColor | String | #000000 | 画笔颜色 | | canvasBack | String | 空 | 画布背景，为空时画布背景透明，支持多种格式 '#ccc'，'#E5A1A1'，'rgb(229, 161, 161)'，'rgba(0,0,0,.6)'，'red', 'http'、'https'、文件路径及'base64'类型图片链接 | | imgBack | String | 空 | 画布最终导出图的图片背景，如果此参数不为空，生成图片时会覆盖canvasBack的背景图，支持多种格式 '#ccc'，'#E5A1A1'，'rgb(229, 161, 161)'，'rgba(0,0,0,.6)'，'red', 'http'、'https'、文件路径及'base64'类型图片链接 | | edg | Number | 0 | 画布导出图需要旋转的角度（如竖屏导出图会生成竖屏尺寸的图片，此参数值为270时,会生成一张横向的图片） | | imgType | String | image/png | 画布导出图的图片类型（可以是其他'image/jpeg'等） | | isRepeat | String | 'no-repeat' | 画布背景是否重复(参数:'repeat','repeat-x','repeat-y' ) | | noRotation | Boolean | false | 横屏时导出图是否旋转角度 (当值为true时，横屏时导出图不会旋转角度)| | isCrop | Boolean | false | 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分 | | backIsCenter | Boolean | false | 背景图片是否居中显示(使用domId或输入固定宽度时生效并且只有图片宽度大于canvas宽度才会生效) | | verticalDeductWidth | Number | 0 | 获取屏幕的宽高生成画布尺时，竖屏时宽度需要减除的尺寸 | | verticalDeductHeight | Number | 0 | 获取屏幕的宽高生成画布尺时，竖屏时高度需要减除的尺寸 | | acrossDeductWidth | Number | 0 | 获取屏幕的宽高生成画布尺时，横屏时宽度需要减除的尺寸 | | acrossDeductHeight | Number | 0 | 获取屏幕的宽高生成画布尺时，横屏时高度需要减除的尺寸 | | recoverPoints | Array | [] | 初始生成布画时，需要恢复到canvas画布上的笔画数据（此数据结构必须是confirm方法返回的结构，结构：[{x:0,y:0,direction:'across'}], direction参数有across和vertical） |

| 方法 | 参数 | 说明 | | :-: | :-- | :-- | | onDrawingStatus | status | 返参可监听画板是否已绘画，true或false | | recoverDraw | Array | 通过此方式可在已生成的画布上，把已有的绘制笔画数据覆盖上去，（此数据结构必须是confirm方法返回的结构，结构：[{x:0,y:0,direction:'across'}], direction参数有across和vertical） | | onMouseDown | event | PC 当鼠标指针移动到元素上方，并按下鼠标按键（左、右键均可）时，会发生mousedown事件。 | | onMouseMove | event | PC 当鼠标指针移动时发生的事件。 | | onMouseUp | event | PC 当在元素上松开鼠标按键（左、右键均可）时，会发生 mouseup 事件。 | | onTouchStart | event | Mobile 当手指触摸屏幕时候触发。 | | onTouchMove | event | Mobile 当手指在屏幕上滑动的时候连续地触发。 | | onTouchEnd | event | Mobile 当手指从屏幕上离开的时候触发。 |

两个内置方法，通过给组件设置 ref 调用：

清空画布

vueSignatureRef.value.reset()

生成图片

vueSignatureRef.value.confirm()
.then((res:{base64: string, points: any}) => {
  imagesSRC.value = res.base64
  sessionStorage.setItem('points', JSON.stringify(res.points))
})
.catch(err => {
  alert(err) // 画布没有签字时会执行这里 'Not Signned'
})