web 签字板实现

签字板 主要适用于 电子签名，比如购买贵重物品的时候，可能就需要使用电子签名。使用效果可点击查看，可以直接在上面进行手动签名，拿到签名信息后保存到服务器端。

签字板组件主要是基于 signature_pad 封装的，canvas 去除周边留白是基于 trim-canvas。

signaturePad 组件介绍

signaturePad 组件放置于 src/components/SignaturePad.vue ，在需要使用的组件中局部注册使用。

props

参数	说明	类型	默认值
toolShow	是否展示上方工具栏，包含颜色切换、清除签名	Boolean	true
colors	用于工具栏中生成颜色列表，可用于切换画笔颜色	Array	['#000', '#f00']
isTrimCanvas	是否需要纯签名（去除周边留白）	Boolean	true
downloadName	下载图片的名称	String	signature

方法

通过 `ref`` 可以获取到 SignaturePad 实例并调用实例方法。

方法名	说明	参数	返回值
getCanvas	获取画板的canvas	–	–
getTrimmedCanvas	获取画板去除周边留白的canvas，props.isTrimCanvas 必须设置为 true	–	canvas
getSignaturePad	获取SignaturePad实例	–	new SignaturePad()
clear	清空画板	–	–
isEmpty	判断画板是否为空，Returns true if canvas is empty, otherwise returns false	–	Boolean
changePenColor	修改画笔颜色	color	–
toDataURL	SignaturePad api功能类似于 canvas 的 toDataURL		String
fromDataURL	SignaturePad api将 toDataURL 导入画板		–
toData	SignaturePad api获取每个笔画，得到的是一个数据		Array
fromData	SignaturePad api可以将 toData 得到的笔画数组导入画板，		–
on	SignaturePad api		–
off	SignaturePad api		–
saveImage	下载图片	(downloadName: string, type: string) downloadName下载图片的名称，优先级高于 props.downloadName，type下载图片类型，默认为png	–
saveAsPng	下载 png 图片	downloadName: string 下载图片的名称，优先级高于 props.downloadName	–
saveAsJpg	下载 jpg 图片	downloadName: string 下载图片的名称，优先级高于 props.downloadName	–

签字板简单演示

<signature-pad>signature-pad>

签字板获取纯签名演示

<signature-pad ref="signaturePad1" :isTrimCanvas="true" downloadName="签名">signature-pad>
<div class="pdt-small pdl-middle pdb-mini">
  <van-button type="success" @click="getIsEmpty1">画板是否为空van-button>
  <van-button type="default" @click="clear1">清空画板van-button>
  <van-button type="warning" @click="changeColor1">修改画笔颜色van-button>
div>
<div class="pdt-mini pdl-middle pdb-small">
  <van-button type="danger" @click="download1">下载签名（png）van-button>
  <van-button type="primary" @click="getSignature1">获取纯签名van-button>
div>
<div class="pdl-middle">
  <div class="pdt-small pdb-small">纯签名：div>
  <img v-if="canvasDataURL1" :src="canvasDataURL1" style="width: 100px">
div>

let signaturePad1 = ref(null)
let canvasDataURL1 = ref('')
const colors = ['#000', '#aaa', '#f00', '#0f0', '#00f']

const getIsEmpty1 = () => {
  Toast(signaturePad1.value.isEmpty() ? '画板为空' : '画板不为空')
}

const clear1 = () => {
  signaturePad1.value.clear()
}

const changeColor1 = () => {
  signaturePad1.value.changePenColor(colors[(Math.random() * 1000).toFixed(0) * 1 % colors.length])
}

const download1 = () => {
  signaturePad1.value.saveAsPng('纯签名')
}

const getSignature1 = () => {
  const canvas = signaturePad1.value.getTrimmedCanvas()
  if (canvas) {
    canvasDataURL1.value = canvas.toDataURL()
  }
}

签字板演示

<signature-pad ref="signaturePad2" :colors="colors" :isTrimCanvas="false" downloadName="签名2">signature-pad>
<div class="pdt-small pdl-middle pdb-mini">
  <van-button type="success" @click="getIsEmpty2">画板是否为空van-button>
  <van-button type="default" @click="clear2">清空画板van-button>
  <van-button type="warning" @click="changeColor2">修改画笔颜色van-button>
div>
<div class="pdt-mini pdl-middle pdb-small">
  <van-button type="danger" @click="download2">下载签名（jpg）van-button>
  <van-button type="danger" @click="download2png">下载签名（png）van-button>
div>
<div class="pdt-mini pdl-middle pdb-small">
  <van-button type="primary" @click="getSignature2">获取签名van-button>
div>
<div class="pdl-middle">
  <div class="pdt-small pdb-small">签名：div>
  <img v-if="canvasDataURL2" :src="canvasDataURL2" style="width: 100px">
div>

let signaturePad2 = ref(null)
let canvasDataURL2 = ref('')
const colors = ['#000', '#aaa', '#f00', '#0f0', '#00f']

const getIsEmpty2 = () => {
  Toast(signaturePad2.value.isEmpty() ? '画板为空' : '画板不为空')
}

const clear2 = () => {
  signaturePad2.value.clear()
}

const changeColor2 = () => {
  signaturePad2.value.changePenColor(colors[(Math.random() * 1000).toFixed(0) * 1 % colors.length])
}

const download2 = () => {
  signaturePad2.value.saveAsJpg()
}
const download2png = () => {
  signaturePad2.value.saveAsPng('download2png')
}

const getSignature2 = () => {
  const canvas = signaturePad2.value.getSignaturePad()
  if (canvas) {
    canvasDataURL2.value = canvas.toDataURL()
  }
}

签字板组件源码