前端 借助 signature_pad 实现签名板

概述

本文介绍如何借助 signature_pad 库，实现一个网页签名板
signature_pad Github 地址
signature_pad npmjs 地址

实现步骤

1. 准备并初始化 canvas
2. 创建签名板
3. 通过 SignaturePad 提供的 API, 实现签名板内容的回显、清除、保存
4. 处理 window 的 resize 事件

1. 准备并初始化 canvas

<div class="container">
  <canvas id="canvas"></canvas>
</div>

.container {
  height: 90vh;
  margin: 10px;
}

canvas {
  width: 100%;
  height: 100%;
  border: 1px solid black;
}

使用 canvas 时，需要通过 canvas 的 width 和 height 属性指定 canvas 的宽高，width 默认值是 300px, height 默认值是 150px
通过 CSS 指定 canvas 宽高时，如果比例不是 2/1, 会导致内容比例异常，通过以下代码进行适配

/**
 * 调整 canvas 的大小
 */
function resizeCanvas() {
  const canvas = document.getElementById('canvas')
  const ratio = Math.max(window.devicePixelRatio || 1, 1)
  canvas.width = canvas.offsetWidth * ratio
  canvas.height = canvas.offsetHeight * ratio
  const context = canvas.getContext('2d')
  context.scale(ratio, ratio)
}

resizeCanvas()

2. 创建签名板

const canvas = document.getElementById('canvas')
// 创建 SignaturePad
const options = { penColor: "rgb(66, 133, 244)" }
const signaturePad = new SignaturePad(canvas, options)

此时，已经可以在 canvas 上签名了

3. 通过 SignaturePad 提供的 API, 实现签名板内容的回显、清除、保存

<button id="redisplay">回显</button>
<button id="clear">清除</button>
<button id="save">保存</button>

// DEFAULT_DATA_URL 代表一个图片的 Base64 编码
let dataURL = DEFAULT_DATA_URL

/**
 * 根据图片的 Base64 编码，把内容显示到签名板上
 */
function redisplay() {
  signaturePad && dataURL && signaturePad.fromDataURL(dataURL)
}

/**
 * 清除签名板内容
 */
function clear() {
  signaturePad.clear()
  dataURL = null
}

/**
 * 获取签名板内容（图片的 Base64 编码）
 */
function save() {
  dataURL = signaturePad.toDataURL()
  console.log(dataURL)
}

document.getElementById('redisplay').addEventListener('click', redisplay)
document.getElementById('clear').addEventListener('click', clear)
document.getElementById('save').addEventListener('click', save)

4. 处理 window 的 resize 事件

window.addEventListener('resize', () => {
  resizeCanvas()
  // 回显
  redisplay()
})

处理签名内容，把图片的 Base64 编码转换成 Blob 或 File

function base64ToBlob(dataURL) {
  let arr = dataURL.split(',')
  let mimeType = arr[0].match(/:(.*?);/)[1] || 'image/png'
  let encodeStr = atob(arr[1])
  let n = encodeStr.length
  let u8Arr = new Uint8Array(n)
  while (n--) {
    u8Arr[n] = encodeStr.charCodeAt(n)
  }
  return new Blob([u8Arr], { type: mimeType })
}

function blobToFile(blob, fileName) {
  // MIME Type
  const type = blob.type || 'text/plain'
  return new File([blob], fileName, { type })
}

const blob = base64ToBlob(dataURL)
console.log(blob)

const file = blobToFile(blob, '图片.png')
console.log(file)

代码仓库

代码仓库

注意事项

• 转换方法 base64ToBlob 和 blobToFile 保存在 /utils/transform-utils.js
• /libs/signature_pad.js 因为写 demo 的需要，注释掉了导出语句，需要使用 signature_pad 库时，请查看官方文档