【签名】PC端签名和小程序端签名实现

前言：最近接到了这样一个需求，需要在pc端和小程序端实现手写签名，两者都可以基于canvas实现手写签名功能
一、PC端手写签名

// 此功能是基于Vue2实现的
<el-form-item label="签字" prop="auditSignImg">
   <div style="position: relative; width: 300px; height: 200px;">
     <canvas id="mycanvas" @mousedown="mousedown"></canvas>
     <i class="el-icon-refresh resetsign" style="
         font-size: 30px;
         position: absolute;
         right: 0;
         bottom: 0;
       " @click="clearcanvas" title="重置签名"></i>
   </div>
 </el-form-item>
 mounted() {
 	this.$nextTick(() => this.createCanvas())
 },
 methods: {
	// 关于签名
    createCanvas() {
      // 获取canvas 实例
      var canvas = document.getElementById("mycanvas");
      // 设置宽高
      canvas.width = this.config.width;
      canvas.height = this.config.height;
      // 设置一个边框，方便咱们检查及运用
      canvas.style.border = "1px solid #ccc";
      // 创立上下文
      this.ctx = canvas.getContext("2d");
      // 设置填充背景色
      this.ctx.fillStyle = "#fff";
      // 制作填充矩形
      this.ctx.fillRect(
        0, // x 轴开端制作方位
        0, // y 轴开端制作方位
        this.config.width, // 宽度
        this.config.height // 高度
      );
    },
    mousedown(e) {
      // 初始化
      // 获取偏移量及坐标
      const {
        offsetX,
        offsetY,
        pageX,
        pageY
      } = e;
      // 修正前次的偏移量及坐标
      this.client.offsetX = offsetX;
      this.client.offsetY = offsetY;
      this.client.endX = pageX;
      this.client.endY = pageY;
      // 铲除以上一次 beginPath 之后的一切途径，进行制作
      this.ctx.beginPath();
      // 依据装备文件设置进行相应装备
      this.ctx.lineWidth = this.config.lineWidth;
      this.ctx.strokeStyle = this.config.strokeStyle;
      this.ctx.lineCap = this.config.lineCap;
      this.ctx.lineJoin = this.config.lineJoin;
      // 设置画线开端点位
      this.ctx.moveTo(this.client.offsetX, this.client.offsetY);
      this.ctx.stroke();
      window.addEventListener("mousemove", this.mousemove);
    },
    mousemove(e) {
      // 获取当时坐标点位
      const {
        offsetX,
        offsetY
      } = e;
      // 依据坐标点位移动增加线条
      let h = document.getElementById("mycanvas").getBoundingClientRect().top;
      let w = document.getElementById("mycanvas").getBoundingClientRect().left;
      this.ctx.lineTo(e.clientX - w, e.clientY - h);
      // 制作
      this.ctx.stroke();
      window.addEventListener("mouseup", this.mouseup);
    },
    mouseup() {
      this.ctx.closePath();
      // 移除鼠标移动或手势移动监听器
      window.removeEventListener("mousemove", this.mousemove);
    },
    clearcanvas() {
      // 清空画布
      this.ctx.clearRect(0, 0, this.config.width, this.config.height);
      // 清空签名url
      this.rejectForm.auditSignImg = '';
    },
 }

二、小程序端手写签名

// 此功能是基于uniapp+Vue3实现的
// SignCanvas.vue
<!-- 签名 -->
<template>
	<view class="canvas-signature">
		<canvas id="myCanvas" canvas-id="myCanvas" :style="{width: cWidth + 'px', height: cHeight + 'px', boxShadow: '-2rpx 2rpx 2rpx 0 rgba(0,0,0,0.1), 2rpx -2rpx 2rpx 0 rgba(0,0,0,0.1)',
      borderRadius: '8rpx 8rpx 8rpx 8rpx'}" @touchstart.stop="touchStart" @touchmove.stop="touchMove" @touchend.stop="touchEnd">
    </canvas>
		<view class="btn-wrap">
			<view class="btn clean base-btn" @click="clear">
				<text>重写</text>
			</view>
			<view class="btn save base-btn" @click="save">
				<text>{{btnText}}</text>
			</view>
		</view>
	</view>
</template>
<script>
import { uploadFile } from '@/utils/file.js'
import { $showToast } from '@/utils/index.js'

let ctx = null
export default {
  props:{
    cHeight: {
      type: Number,
      default: 200
    },
    strokeStyle: {
      type: String,
      default: '#000'
    },
    lineWidth: {
      type: Number,
      default: 3
    },
    btnText: {
      type: String,
      default: '保存'
    },
    pageType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      cWidth: 375,
      touchStartX: 0, // 手指触摸开始x坐标
      touchStartY: 0, // 手指触摸开始y坐标
      moveX: 0, // 移动x坐标
      moveY: 0, // 移动y坐标
      hasContent: false // 是否已签名
    }
  },
  mounted() {
    const res = uni.getWindowInfo()
    this.cWidth = res.screenWidth * 0.9
    ctx = uni.createCanvasContext('myCanvas', this)
    ctx.lineWidth = this.lineWidth
    ctx.strokeStyle = this.strokeStyle
    ctx.lineCap = 'round'
  },
  methods: {
    touchStart(e) {
      const {touches} = e			
      this.touchStartX = touches[0].x
      this.touchStartY = touches[0].y
      // 每次触摸开始，开启新的路径
      ctx.beginPath()
    },
    touchMove(e) {
      const {touches} = e
      this.moveX = touches[0].x
      this.moveY = touches[0].y
      // 两点画一笔
      ctx.moveTo(this.touchStartX, this.touchStartY)
      ctx.lineTo(this.moveX,this.moveY)
      ctx.stroke()
      ctx.draw(true) // 将上一次的终点作为下一次绘制的起点
      this.touchStartX = this.moveX
      this.touchStartY = this.moveY
      this.hasContent = true
    },
    touchEnd(e) {},
    // 保存
    save() {
      if (!this.hasContent) {
        $showToast('请先签名')
        return
      }
      uni.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: (res) => {
          uploadFile(res?.tempFilePath).then(result => {
            this.$emit('handleSingature', result?.fileName)
          })
        },
        fail: (error) => {
          console.log('回调错误', error);
        }
      }, this)
    },
    // 重写
    clear() {
      this.hasContent = false
      ctx.clearRect(0, 0, this.cWidth, this.cHeight)
      ctx.draw(true)
    }
  }
}
</script>

<style lang="scss" scoped>
.canvas-signature {
  background: #FFFFFF;
  .btn-wrap {
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 20rpx 0;
    border-top: 1rpx solid #f5f5f5;
    .btn,&.clean {
      width: 40%;
      height: 104rpx;
      line-height: 104rpx;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      font-size: 36rpx;
    }
    .btn {
      padding: 0 14rpx;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0FAD70;
      &.clean {
        margin-right: 20rpx;
        background-color: #ffffff;
        border: 2rpx solid #C6C6C8;
        color: #333333;
      }
    }
  }
}
</style>

// 父组件引用SignCanvas.vue
<my-canvas cHeight="460" @handleSingature="handleSingature"></my-canvas>
handleSingature(fileName) {
	// 手写签名转成的文件名
	console.log(fileName)
}