uniapp小程序使用canvas画布进行签名

<template>
  <view>
    <view class="wrapper">
      <view class="handBtn">
        <image @click="selectColorEvent('black', '#1A1A1A')"
          :src="selectColor === 'black' ? '/static/img/sign/color_black_selected.png' : '/static/img/sign/color_black.png'"
          :class="[selectColor === 'black' ? 'color_select' : '', 'black-select']"></image>
        <image @click="selectColorEvent('red', '#ca262a')"
          :src="selectColor === 'red' ? '/static/img/sign/color_red_selected.png' : '/static/img/sign/color_red.png'"
          :class="[selectColor === 'red' ? 'color_select' : '', 'black-select']"></image>
        <button @click="retDraw" class="delBtn">重写</button>
        <button @click="saveCanvasAsImg" class="saveBtn">保存</button>
        <button @click="previewCanvasImg" class="previewBtn">预览</button>
        <button @click="uploadCanvasImg" class="uploadBtn">上传</button>
        <button @click="subCanvas" class="subBtn">完成</button>
        <button @click="back" class="subBtn">返回</button>
      </view>
      <view class="handCenter">
        <canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart" @touchmove="uploadScaleMove"
          @touchend="uploadScaleEnd" canvas-id="handWriting"></canvas>
      </view>
      <view class="handRight">
        <view class="handTitle">请签名</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
   
  data () {
   
    return {
   
      canvasName: 'handWriting',
      ctx: '',
      canvasWidth: 0,
      canvasHeight: 0,
      transparent: 1, // 透明度
      selectColor: 'black',
      lineColor: '#1A1A1A', // 颜色
      lineSize: 1.5, // 笔记倍数
      lineMin: 0.5, // 最小笔画半径
      lineMax: 4, // 最大笔画半径
      pressure: 1, // 默认压力
      smoothness: 60, //顺滑度，用60的距离来计算速度
      currentPoint: {
   },
      currentLine: [], // 当前线条
      firstTouch: true, // 第一次触发
      radius: 1, //画圆的半径
      cutArea: {
   
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
      }, //裁剪区域
      bethelPoint: [], //保存所有线条 生成的贝塞尔点；
      lastPoint: 0,
      chirography: [], //笔迹
      currentChirography: {
   }, //当前笔迹
      linePrack: [] //划线轨迹 , 生成线条的实际点
    };
  },
  onLoad () {
   
    let canvasName = this.canvasName;
    let ctx = wx.createCanvasContext(canvasName);
    this.ctx = ctx;
    let query = wx.createSelectorQuery();
    query
      .select('.handCenter')
      .boundingClientRect(rect => {
   
        this.canvasWidth = rect.width;
        this.canvasHeight = rect.height;

        /* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
        this.setCanvasBg('rgba(0,0,0,0)');
      })
      .exec();
  },
  methods: {
   
    // 笔迹开始
    uploadScaleStart (e) {
   
      if (e.type != 'touchstart') return false;
      let ctx = this.ctx;
      ctx.setFillStyle(this.lineColor); // 初始线条设置颜色
      ctx.setGlobalAlpha(this.transparent); // 设置半透明
      let currentPoint = {
   
        x: e.touches[0].x,
        y: e.touches[0].y
      };
      let currentLine = this.currentLine;
      currentLine.unshift({
   
        time: new Date().getTime(),
        dis: 0,
        x: currentPoint.x,
        y: currentPoint.y
      });
      this.currentPoint = currentPoint;
      // currentLine
      if (this.firstTouch) {
   
        this.cutArea = {
   
          top: currentPoint.y,
          right: currentPoint.x,
          bottom: currentPoint.y,
          left: currentPoint.x
        };
        this.firstTouch = false;
      }
      this.pointToLine(currentLine);
    },
    // 笔迹移动
    uploadScaleMove (e) {
   
      if (e.type != 'touchmove') return false;
      if (e.cancelable) {
   
        // 判断默认行为是否已经被禁用
        if (!e.defaultPrevented) {
   
          e.preventDefault();
        }
      }
      let point = {
   
        x: e.touches[0].x,
        y: e.touches[0].y
      };

      //测试裁剪
      if (point.y < this.cutArea.top) {
   
        this.cutArea.top = point.y;
      }
      if (point.y < 0) this.cutArea.top =