移动端数字签名实现(vue框架)

数字签名demo演示

目的：能够在移动设备上实现电子签名，并保存为图片。

使用：1. npm安装： npm install signature_pad --save
main.js中use()
import SignaturePad from ‘signature_pad’

<template>
  <div>
    <button is-link @click="show = true">展示弹出层</button>
    <img :src="base64" alt="" class="signature-img" >
    <canvas id="canvas-offscreen"  />

    <van-popup
      :lazy-render="false"
      closeable
      round
      v-model="show"
      position="bottom"
      :style="{ height: '60%' }"
    >
      <div class="signature-pad--body">
        <canvas id="sig_canvas"></canvas>
      </div>
      <div class="top">
        <van-button type="info" plain round @click="handleClear()">清空</van-button>
        <van-button type="info" plain round @click="handleConfirm()">确认</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import SignaturePad from 'signature_pad';
import { Button, Popup, Toast } from 'vant'
export default {
  components: {
    [Button.name]: Button,
    [Popup.name]: Popup
  },
  data() {
    return {
        show: false,
        SignaturePad:null,
        canvasDom: null,
        base64: require('../../../../../public/images/111.png'),
        config:{
          penColor: "red",   //笔刷颜色
          minWidth:3,       //最小宽度
        }
    }
  },
  created() {

  },
  watch: {
    show(val) {
      if (val && !this.canvasDom) {
        setTimeout(() => {  // 添加宏任务使得，当 show 的值从 false 变为 true 时，弹出层才会显示出来。但是在 DOM 更新后，才有可能能够获取到相应的元素
          this.init()
          this.resize()
        }, 20)
      }
    }
  },
  methods: {
    init() {
      let canvas = document.getElementById('sig_canvas');
      this.canvasDom = canvas
      this.signaturePad = new SignaturePad(this.canvasDom,this.config);
      
    },
    resize() {
      window.onresize = this.handleScreen() // 是调整窗口大小加载事件，当触发时就调用的处理函数。
    },
    handleScreen() {
      // 1, 获取当前设备的像素比例，并且将其设为 1
      const setScreen = Math.max(window.devicePixelRatio || 1, 1)
      this.canvasDom.width = this.canvasDom.offsetWidth * setScreen
      this.canvasDom.height = this.canvasDom.offsetHeight * setScreen
      this.canvasDom.getContext('2d').scale(setScreen, setScreen)
    },
    // 清空的方法
    handleClear() {
      this.signaturePad && this.signaturePad.clear()
    },

    handleConfirm() {
 
      if (this.signaturePad.isEmpty()) {
        Toast('您未签名')
        return
      }
      let dataURL = this.signaturePad.toDataURL()
      this.generateImageWithBase64(dataURL)

    },
    async generateImageWithBase64(base64) {
      const imageSrc = this.base64


      // 加载图像
      const image = await this.loadImage(imageSrc)

      // // 在Canvas上绘制图像
      await this.drawImageOnCanvas(image, base64)

      // // 将Canvas图像转换为Base64
      const base64Data = await this.canvasToBase64()

      // // 在这里可以使用Base64数据，例如将其发送到服务器或显示在页面上
      // this.result = base64Data
      this.show = false;
      const aaa = document.querySelector('.signature-img')
 
      aaa.src = base64Data
    },
    loadImage(src) {
      return new Promise((resolve, reject) => {
        const image = new Image()
        image.onload = () => resolve(image)
        image.onerror = reject
        image.src = src

      })
    },
    drawImageOnCanvas(image, appendBase64) {
      return new Promise(resolve => {
        const canvas = document.getElementById('canvas-offscreen')
        const context = canvas.getContext('2d')

        // 设置canvas的宽度和高度与图像相同  image:背景图
        canvas.width = image.width
        canvas.height = image.height
        // 绘制图像
        context.drawImage(image, 0, 0)

        let base = new Image();
        // 在画布上定位图像，并规定图像的宽度和高度：
        // context.drawImage(img,x,y,width,height);
        // img	规定要使用的图像、画布或视频。
        // x	在画布上放置图像的 x 坐标位置。
        // y	在画布上放置图像的 y 坐标位置。
        // width	可选。要使用的图像的宽度。（伸展或缩小图像）
        // height	可选。要使用的图像的高度。（伸展或缩小图像）


        base.onload = function() {
          context.drawImage(base, 10, 10, 200, 200);
          resolve()
        };
        base.src = appendBase64;
      })
    },
    canvasToBase64() {
      return new Promise(resolve => {
        const canvas = document.getElementById('canvas-offscreen')
        const base64Data = canvas.toDataURL()
        console.log(base64Data);
        resolve(base64Data)
      })
    },
  },
};
</script>

<style scoped lang="scss">
img {
  width: 100%;
  height: 600px;
}
.signature-pad--body {
  position: relative;
  box-sizing: border-box;
  height: 86%;
  width: 97%;
  margin: 10px auto 0 auto;
  border: 1px solid #f4f4f4;
}
#sig_canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}
.top {
  margin: 0 auto;
  width: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  button {
    width: 200px;
    height: 56px;
  }
}
#canvas-offscreen {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -999px;
  left: -999px
}
</style>