uniapp签名组件-适用于微信小程序

uniapp签字版(签名)组件

演示效果

看代码自行修改canvas样式,宽度和高度
如果有bug,欢迎在评论区指出

sign-con.vue
<script setup>
import { reactive, onMounted, getCurrentInstance, ref } from "vue";
const _this = reactive({
  loading: false,
});

let data = reactive({
  ctx: null, //绘图图像
  points: [], //路径点集合
  path: "",
  flag: false,
});
const instance = ref(null);
onMounted(() => {
  instance.value = getCurrentInstance();
  init();
});

function init() {
  data.ctx = uni.createCanvasContext("signsss", instance.value);
  data.ctx.lineWidth = 6;
  data.ctx.lineCap = "round";
  data.ctx.lineJoin = "round";
  data.flag = false;
}
function touchstart(e) {
  let startX = e.changedTouches[0].x;
  let startY = e.changedTouches[0].y;
  let startPoint = { X: startX, Y: startY };
  data.points.push(startPoint);
  data.ctx.beginPath();
}
function touchmove(e) {
  let moveX = e.changedTouches[0].x;
  let moveY = e.changedTouches[0].y;
  let movePoint = { X: moveX, Y: moveY };
  data.points.push(movePoint); //存点
  let len = data.points.length;
  if (len >= 2) {
    draw(); //绘制路径
  }
}
function touchend(e) {
  data.points = [];
}
function touchcancel(e) {
  touchend();
}
function draw() {
  let point1 = data.points[0];
  let point2 = data.points[1];
  data.points.shift();
  data.ctx.moveTo(point1.X, point1.Y);
  data.ctx.lineTo(point2.X, point2.Y);
  data.ctx.stroke();
  data.ctx.draw(true);
  data.flag = true;
}

function save() {
  _this.loading = true;
  uni.canvasToTempFilePath(
    {
      x: 0,
      y: 0,
      width: 320, // 画布得宽度,单位px
      height: 566, // 画布得高度,单位px
      canvasId: "signsss",
      success: function (res) {
        // res.tempFilePath 临时路径
        console.log(123, res.tempFilePath);
        // 获取到这个临时路径,就可以调用uniapp的上传api uni.uploadFile
        // 转base64
        uni.getFileSystemManager().readFile({
          filePath: res.tempFilePath,
          encoding: "base64",
          success: (e) => {
            let base64 = "data:image/png;base64," + e.data;
            console.log(base64);
          },
          complete: function () {
            _this.loading = false;
          },
        });
      },
      complete: function () {
        _this.loading = false;
      },
    },
    instance.value
  );
}
//清空画布
function clear() {
  uni.getSystemInfo({
    success: function (res) {
      let canvasw = res.windowWidth;
      let canvash = res.windowHeight;
      data.ctx.clearRect(0, 0, canvasw, canvash);
      data.ctx.draw(false);
      data.flag = false;
    },
  });
}
</script>
<template>
  <view>
    <view class="title">签名组件</view>
    <view class="sign-content">
      <canvas
        style="width: 640rpx; height: 1136rpx"
        canvas-id="signsss"
        id="signsss"
        class="signsss"
        disable-scroll
        :hidpi="false"
        @touchstart="touchstart"
        @touchmove="touchmove"
        @touchend="touchend"
        @touchcancel="touchcancel"
      ></canvas>
    </view>
    <view class="btns">
      <button class="btn" @click="save" :loading="_this.loading">保存</button>
      <button class="btn" @click="clear">重置</button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.title {
  padding: 40rpx 0;
  text-align: center;
}
.sign-content {
  border: 2rpx solid red;
  width: 640rpx;
  margin: 0 auto;
  height: 1136rpx;
}
.btns {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40rpx;
}
.btn {
  width: 300rpx;
  height: 80rpx;
  margin: 0 10rpx;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>