小程序和H5手写签名

最近在做项目遇到一个需求，要手写签名并将canvas图片转化为base64。网上找来两个例子，一个是H5页面用vue实现的，一个是小程序原生。
围观地址：

• H5移动端项目实现手写签名功能 vue实现手写签名
• 小程序只有找到github仓库

H5和小程序实现方式不太一样，canvas创建和监听有所不同，另外转化成base64，H5上只需要执行

const res = this.canvas.toDataURL("image/png")
复制代码

即可获得base64的图片，而小程序是执行

var fs = wx.getFileSystemManager().readFileSync(res.tempFilePath, "base64")
复制代码

把H5的代码搬上来

<template>
  <div class="page sign-page container" id="container">
    <div class="content">
      <div class="sign-wrap" id="signWrap">
         <canvas
          class="canvas"
          id="canvas"
          canvas-id="canvas"
        ></canvas>
      </div>
    </div>
    <div class='con-btn'>
      <button class='staging-btn' @click="handleClear">重写</button>
      <button
        class='submit-btn'
        @click="handleSubmit"
      >确定</button>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: "handWriting",
  ready() {
    this.context = document.getElementById('canvas').getContext('2d')
    this.canvas = document.getElementById('canvas')
    const container = document.getElementById('container')
    this.canvas.width = container.clientWidth
    this.canvas.height = container.clientHeight
    this.init()
  },
  methods: {
    init() {
      const that = this
      this.canvas.addEventListener(
        "touchstart",
        function (event) {
          if (event.targetTouches.length == 1) {
            event.preventDefault(); // 阻止浏览器默认事件，重要
            var touch = event.targetTouches[0];
            this.mousePressed = true;
            that.Draw(
              that.context,
              touch.pageX - this.offsetLeft,
              touch.pageY - this.offsetTop,
              false
            );
          }
        },
        false
      );
      this.canvas.addEventListener(
        "touchmove",
        function (event) {
          if (event.targetTouches.length == 1) {
            event.preventDefault(); // 阻止浏览器默认事件，重要
            var touch = event.targetTouches[0];
            if (this.mousePressed) {
              that.Draw(
                that.context,
                touch.pageX - this.offsetLeft,
                touch.pageY - this.offsetTop,
                true
              );
            }
          }
        },
        false
      );
      this.canvas.addEventListener(
        "touchend",
        function (event) {
          if (event.targetTouches.length == 1) {
            event.preventDefault(); // 阻止浏览器默认事件，防止手写的时候拖动屏幕，重要
          }
          this.mousePressed = false;
        },
        false
      );
      // 鼠标
      this.canvas.onmousedown = function (event) {
        this.mousePressed = true;
        that.Draw(
          that.context,
          event.pageX - this.offsetLeft,
          event.pageY - this.offsetTop,
          false
        );
      };
      this.canvas.onmousemove = function (event) {
        if (this.mousePressed) {
          that.Draw(
            that.context,
            event.pageX - this.offsetLeft,
            event.pageY - this.offsetTop,
            true
          );
        }
      };
      this.canvas.onmouseup = function (event) {
        this.mousePressed = false;
      };
    },
    Draw(ctx, x, y, isDown) {
      if (isDown) {
        ctx.beginPath();
        ctx.strokeStyle = "#000"; // 颜色
        ctx.lineWidth = 3; // 线宽
        ctx.lineJoin = "round";
        ctx.lineMax = 10; // 设置画笔最大线宽
        ctx.lineMin = 3; // 设置画笔最小线宽
        ctx.linePressure = 1.2; // 设置画笔笔触压力
        ctx.smoothness = 30; // 设置画笔笔触大小变化的平滑度
        ctx.moveTo(this.lastX, this.lastY);
        ctx.lineTo(x, y);
        ctx.closePath();
        ctx.stroke();
      }
      this.lastX = x;
      this.lastY = y;
    },
    handleSubmit() {
      if (this.isCanvasBlank(this.canvas)) {
        alert('empty!')
        return
      }
      const res = this.canvas.toDataURL("image/png")
      console.log('res-base64',res)
    },
    isCanvasBlank(canvas) {
      var blank = document.createElement("canvas"); // 系统获取一个空canvas对象
      blank.width = canvas.width;
      blank.height = canvas.height;
      return canvas.toDataURL() == blank.toDataURL(); // 比较值相等则为空
    },
    handleClear () {
      this.context.setTransform(1, 0, 0, 1, 0, 0);
      this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
    },
  },
  data() {
    return {
      context: null, 
      canvas: null,
      mousePressed: false, //是否在绘制中
    }
  }
}
</script>

<style lang="" scoped>
.container {
  position: relative;
  width: 100%;
  height: 100vh;
}
.con-btn {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-between
}
.con-btn > button {
  margin: 10px;
  padding: 5px 10px;
  border: none;
}
.submit-btn {
  background: #24c123;
  color: white;
}
canvas{
  display: block;
  box-sizing: border-box;
  height: calc(100% - 18px);
  flex: 1;
  margin-right: 16px;
  margin: 5rpx;
  background: #ffffff;
}
</style>
复制代码