uniapp写微信小程序实现电子签名

news2024/11/26 10:44:43

写电子签名一定要注意的是一切全部按照手机上的适配来，为啥这么说呢，因为你在微信开发者工具中调试的时候认为是好的，正常的非常nice,当你发布版本的时候你会发现问题出来了。我下边的写法你可以直接用很简单。就是要记住canvas的几个属性和用法。

直接上干货

1.签名样式页面


      <!-- 签名 -->
      <view class="wrapper n-sign">
        <view class="h3">人员签字</view>
        <view class="handCenter">
          <canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart" @touchmove="uploadScaleMove"
            canvas-id="handWriting"></canvas>
        </view>
        <view class="footer">
          <view :class="{ button: 1, 'n-sign-disabled': (startX == null && startY == null) }" @tap="retDraw">清除</view>
          <view :class="{ button: 1, 'n-sign-disabled': (startX == null && startY == null) }" @tap="saveCanvasAsImg">提交
          </view>
        </view>
      </view>

2.记得定义

  data() {
    return {
      canvasName: 'handWriting',
      ctx: '',
      startX: null,
      startY: null,
      canvasWidth: 0,
      canvasHeight: 0,
      selectColor: 'black',
      lineColor: '#1A1A1A', // 颜色
      lineSize: 5, // 笔记倍数
      name: '', //用来区分多个签字
     
    };
  },

3.事件


  methods: {
// 笔迹开始
    uploadScaleStart(e) {
      this.startX = e.changedTouches[0].x
      this.startY = e.changedTouches[0].y
      //设置画笔参数
      //画笔颜色
      this.ctx.setStrokeStyle(this.lineColor)
      //设置线条粗细
      this.ctx.setLineWidth(this.lineSize)
      //设置线条的结束端点样式
      this.ctx.setLineCap("round") //'butt'、'round'、'square'
      //开始画笔
      this.ctx.beginPath()
    },
    // 笔迹移动
    uploadScaleMove(e) {
      //取点
      let temX = e.changedTouches[0].x
      let temY = e.changedTouches[0].y
      //画线条
      this.ctx.moveTo(this.startX, this.startY)
      this.ctx.lineTo(temX, temY)
      this.ctx.stroke()
      this.startX = temX
      this.startY = temY
      this.ctx.draw(true)
    },
    /**
     * 重写
     */
    retDraw() {
      if (this.startX == null && this.startY == null) {
        return;
      }
      this.ctx.clearRect(0, 0, 700, 730);
      this.ctx.draw();
      //设置canvas背景
      this.setCanvasBg('#fff');
      this.startX = null;
      this.startY = null;
    },


    //生成图片
    async saveCanvasAsImg() {
      if (this.startX == null && this.startY == null) {
        return;
      }
      uni.showLoading({
        mask: true
      })
      var res = await uni.canvasToTempFilePath({
        canvasId: 'handWriting',
        fileType: 'png',
        quality: 1, //图片质量

      });
      for (var i = 0; i < res.length; i++) {
        if (res[i] && res[i].tempFilePath) {
          res = await this.nupload(res[i].tempFilePath, 14);
          break;
        }
      }
      // res = await this.nupload(path, 13);
      uni.hideLoading();
      uni.showToast({ title: "已上传" })
    },

    //设置canvas背景色  不设置  导出的canvas的背景为透明
    //@params：字符串  color
    setCanvasBg(color) {

      /* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
      //rect() 参数说明  矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
      //这里是 canvasHeight - 4 是因为下边盖住边框了，所以手动减了写
      this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4);
      // ctx.setFillStyle('red')
      this.ctx.setFillStyle(color);
      this.ctx.fill(); //设置填充
      this.ctx.draw(); //开画
    },
    // 上传图片并返回上传结果
    async nupload(filePath, imgType) {
      if (!filePath) return; //如果 filePath 不存在，直接返回

      // 调用 postWaitWorkImage 方法发送 POST 请求上传图片，并传递了文件路径、参数等信息。
      // 若上传成功，将返回结果解析为 JSON 格式（如果不是JSON格式，则直接使用原始结果）。



      const res = await postWaitWorkImage({
        filePath,
        name: "file",
        params: { imgType, id: this.merInfo.id, },
      }).catch((e) => (console.log(e), false));
      let res_;
      try {
        res_ = JSON.parse(res);
      } catch {
        res_ = res;
      }

      if (res_.code === 200) {
        return res_;
      } else {
        uni.showToast({ title: "上传失败", icon: "error" });
        return false;
      }
    },
  },

4.页面触发


  onReady() {
    this.$nextTick(() => {
      this.name = 'handWriting1'
      this.ctx = uni.createCanvasContext("handWriting");
      this.$nextTick(() => {
        uni.createSelectorQuery().select('.handCenter').boundingClientRect(rect => {
          this.canvasWidth = rect.width;
          this.canvasHeight = rect.height;
          /* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
          this.setCanvasBg('#fff');
        })
          .exec();
      });
    })
  },

5.样式

.handWriting {
  background: #fff;
  width: 640rpx;
  height: 783rpx;
  border-radius: 20rpx;
  border: 1px solid #ff791c;
  overflow: hidden;
}

.handCenter {
  margin-bottom: 36rpx;

}

6.需要注意的是

实现签名我们用的是画布，不可能知道100%完美。所以这里我已经很合适的在设计了有啥问题可以留言。我把我的效果图看下看下希望对大家有帮助