在vue项目中手写签名面板

话不多说，直接贴代码

<template>
  <div class="wrap">
    <div ref="signatureArea" class="signature"  @mousedown="startDrawing" @mousemove="drawing" @mouseup="stopDrawing">
    </div>
    <div class="btn_group">
      <button class="btn"  @click="handleClear">重新签名</button>
      <button class="btn"  @click="handleSave">保存签名</button>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'signPage',
  data(){
    return {
      drawingCanvas:'',
      backgroundCanvas:'',
      drawingCtx:'',
      backgroundCtx:'',
      isDrawing:false,
      lastX:null,
      lastY:null
    }
  },
  created(){
    // 创建两个canvas元素
    this.drawingCanvas = document.createElement('canvas'); // 用于绘制签名
    this.backgroundCanvas = document.createElement('canvas'); // 用于保存带有白色背景的签名图像
  },
  mounted(){  
    this.init() 
  },
  methods:{
    init(){
      this.drawingCtx = this.drawingCanvas.getContext('2d'); // 获取绘制画布的上下文对象
      this.backgroundCtx = this.backgroundCanvas.getContext('2d'); // 获取背景画布的上下文对象
      this.drawingCanvas.width = this.$refs.signatureArea.offsetWidth;
      this.drawingCanvas.height = this.$refs.signatureArea.offsetHeight;
      this.backgroundCanvas.width = this.drawingCanvas.width;
      this.backgroundCanvas.height = this.drawingCanvas.height;
      this.$refs.signatureArea.appendChild(this.drawingCanvas)
    },
    //鼠标按下
    startDrawing(e){
      e.preventDefault(); // 阻止默认事件
      var touch = e; // 获取触摸点坐标
      var rect = this.$refs.signatureArea.getBoundingClientRect(); // 获取签名区域的位置和大小
      this.lastX = touch.clientX - rect.left;
      this.lastY = touch.clientY - rect.top;
      this.isDrawing = true;
    },
    //开始绘画
    drawing(e){
      if (!this.isDrawing) return;
      var touch = e;
      var rect = this.$refs.signatureArea.getBoundingClientRect();
      var x = touch.clientX - rect.left;
      var y = touch.clientY - rect.top;
      this.drawLine(this.lastX, this.lastY, x, y);
      this.lastX = x;
      this.lastY = y;

    },
    // 绘制实线
    drawLine(x1, y1, x2, y2) {
      this.drawingCtx.beginPath(); // 开始一条新的路径
      this.drawingCtx.moveTo(x1, y1); // 将画笔移动到起点
      this.drawingCtx.lineTo(x2, y2); // 绘制一条直线到终点
      this.drawingCtx.lineWidth = 1; // 设置线条的宽度为1像素
      this.drawingCtx.strokeStyle = '#b42323'; // 设置线条颜色为黑色
      this.drawingCtx.stroke(); // 绘制线条
    },
    //停止绘画
    stopDrawing(){
      this.isDrawing=false
    },
    //重新签名
    handleClear(){
      // 清除签名
      this.drawingCtx.clearRect(0, 0, this.drawingCanvas.width, this.drawingCanvas.height); // 清除绘制画布的内容
      this.backgroundCtx.clearRect(0, 0, this.backgroundCanvas.width, this.backgroundCanvas.height); // 清除背景画布的内容
    },
    //保存签名
    handleSave(){
      // 绘制白色背景
      this.backgroundCtx.fillStyle = 'white';
      this.backgroundCtx.fillRect(0, 0, this.backgroundCanvas.width, this.backgroundCanvas.height);
    
      // 复制绘制的签名到带有白色背景的画布
      this.backgroundCtx.drawImage(this.drawingCanvas, 0, 0);
    
      // 将带有白色背景的画布内容转为PNG格式的DataURL
      var dataURL = this.backgroundCanvas.toDataURL("image/png");
  
      // 创建一个链接元素并设置下载属性
      var link = document.createElement('a');
      var time=new Date().getTime()
      link.href = dataURL;
      link.download = '签名'+time+'.png'; // 设置下载文件的名称
      link.style.display = "none";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
  }
}
</script>

<style scoped>
.wrap{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .signature{
    width: 80%;
    height: 400px;
    border: 1px solid #868080;
  }
  .btn_group{
    margin-top: 16px;
    .btn{
      width: 140px;
      line-height: 38px;
      text-align: center;
      font-weight: bold;
      letter-spacing: 2px;
      color: #fff;
      text-shadow:1px 1px 1px #333;
      border-radius: 5px;
      margin:0 20px 20px 20px;
      border:1px solid #b42323;
      background-color: rgb(207, 41, 41);
    }
  }
}
</style>