微信小程序实现canvas电子签名

阿兵呐2024-10-25 18:06

一、先看效果

小程序canvas电子签名

二、文档

微信小程序canvas 组件文档
微信小程序canvas API文档
H5Canvas文档

三、分析

1、初始话Canvas容器

2、Canvas触摸事件，bindtouchstart（手指触摸动作开始）、bindtouchmove（手指触摸后移动）、bindtouchend（手指触摸动作结束）、bindtouchcancel（手指触摸动作被打断，如来电提醒，弹窗）

3、记录每次从开始到结束的路径段

4、清除、撤销

四、代码分析

1、页面的布局、Canvas容器的初始化

1、先将屏幕横过来，index.json配置文件，"pageOrientation": "landscape"

2、wx.getSystemInfoSync() 获取可使用窗口的宽高，赋值给Canvas画布（注意若存在按钮区域、屏幕安全区之类的，需要减去）

javascript 复制代码 
 // 获取可使用窗口的宽高，赋值给Canvas（宽高要减去上下左右padding的20，以及高度要减去footer区域）
 wx.createSelectorQuery()
   .select('.footer') // canvas获取节点
   .fields({node: true, size: true}) // 获取节点的相关信息，node：是否返回节点对应的 Node 实例，size：是否返回节点尺寸
   .exec((res) => {
     // 获取手机左侧安全区域(刘海)
     const deviceInFo = wx.getSystemInfoSync()
     const canvasWidth = deviceInFo.windowWidth - 20 - deviceInFo?.safeArea?.left || 0
     const canvasHeight = deviceInFo.windowHeight - res[0].height - 20
     console.log('canvasWidth', canvasWidth);
     console.log('canvasHeight', canvasHeight);
     this.setData({
       deviceInFo,
       canvasWidth,
       canvasHeight
     })
     this.initCanvas('init')
   })

3、通过wx.createSelectorQuery()获取到canvas节点，随即可获取到canvas的上下文实例

javascript 复制代码 
  // 初始话Canvas画布
  initCanvas() {
    let ctx = null
    let canvas = null
    // 获取Canvas画布以及渲染上下文
    wx.createSelectorQuery()
      .select('#myCanvas') // canvas获取节点
      .fields({node: true, size: true}) // 获取节点的相关信息，node：是否返回节点对应的 Node 实例，size：是否返回节点尺寸
      .exec((res) => { // 执行所有的请求。请求结果按请求次序构成数组
        // Canvas 对象实例
        canvas = res[0].node
        // Canvas 对象上下文实例（动画动作绘图等都是在他的身上完成）
        ctx = canvas.getContext('2d')
        // Canvas 画布的实际绘制宽高
        const width = res[0].width;
        const height = res[0].height;
        // 获取设备像素比
        const dpr = wx.getWindowInfo().pixelRatio;
        // 初始化画布大小
        canvas.width = width * dpr;
        canvas.height = height * dpr;
        // 画笔的颜色
        ctx.fillStyle = 'rgb(200, 0, 0)';
        // 指定了画笔（绘制线条）操作的线条宽度
        ctx.lineWidth = 5
        // 缩小/放大图像
        ctx.scale(dpr, dpr)
        this.setData({canvas, ctx});
      })
  },
2、线条的绘制

通过canva组件的触摸事件bindtouchstart、bindtouchmove、bindtouchend、bindtouchcancel结合canvas的路径绘制的方法moveTo(x,y)、lineTo(x,y)、stroke()来实现一段线条的绘制
1、bindtouchstart手指触摸动作开始，结合moveTo(x,y) 用来设置绘图起始坐标的方法确定线段的开始坐标

javascript 复制代码 
  // 手指触摸动作开始
  bindtouchstart(event) {
  	let {type, changedTouches} = event;
    let {x, y} = changedTouches[0];
    ctx.moveTo(x, y); // 设置绘图起始坐标。
  },

2、bindtouchend手指触摸动作结束，结合lineTo(x,y) 来绘制一条直线，最后stroke()渲染路径

javascript 复制代码 
  // 手指触摸动作结束
  bindtouchend(event) {
  	let {type, changedTouches} = event;
    let {x, y} = changedTouches[0];
     ctx.lineTo(x, y);
     // 绘制
     ctx.stroke();
  },

3、但这只是一条直线段，并未实现签名所需的曲线（曲线实质上也是由无数个非常短小的直线段构成）

4、bindtouchmove事件会在手指触摸后移动时，实时返回当前状态

5、那么可否通过bindtouchmove 结合 moveTo ==> lineTo ==> stroke ==> moveTo ==> ... 以上一次的结束为下一次的开始这样的方式来实时渲染直线段合并为一个近似的曲线

javascript 复制代码 
  // 手指触摸后移动	
  bindtouchmove(event) {
  	let {type, changedTouches} = event;
    let {x, y} = changedTouches[0];
    // 上一段终点
    ctx.lineTo(x, y) // 从最后一点到点(x,y)绘制一条直线。
    // 绘制
    ctx.stroke();
    // 下一段起点
    ctx.moveTo(x, y) // 设置绘图起始坐标。
  },

6、归纳封装

javascript 复制代码 
  // 手指触摸动作开始
  bindtouchstart(event) {
    this.addPathDrop(event)
  },
  // 手指触摸后移动	
  bindtouchmove(event) {
    this.addPathDrop(event)
  },
  // 手指触摸动作结束
  bindtouchend(event) {
    this.addPathDrop(event)
  },
  // 手指触摸动作被打断，如来电提醒，弹窗
  bindtouchcancel(event) {
    this.addPathDrop(event)
  },
  // 添加路径点
  addPathDrop(event) {
    let {ctx, historyImag, canvas} = this.data
    let {type, changedTouches} = event
    let {x, y} = changedTouches[0]
    if(type === 'touchstart') { // 每次开始都是一次新动作
      // 最开始点
      ctx.moveTo(x, y) // 设置绘图起始坐标。
    } else {
      // 上一段终点
      ctx.lineTo(x, y) // 从最后一点到点(x,y)绘制一条直线。
      // 绘制
      ctx.stroke();
      // 下一段起点
      ctx.moveTo(x, y) // 设置绘图起始坐标。
    }
  },
3、上一步、重绘、提交

主体思路为每一次绘制完成后都通过wx.canvasToTempFilePath生成图片，并记录下来，通过canvas的drawImage方法将图片绘制到 canvas 上

五、完整代码

1、inde.json

json 复制代码 
{
  "navigationBarTitleText": "电子签名",
  "backgroundTextStyle": "dark",
  "pageOrientation": "landscape",
  "disableScroll": true,
  "usingComponents": {
    "van-button": "@vant/weapp/button/index",
    "van-toast": "@vant/weapp/toast/index"
  }
}

2、index.wxml

html 复制代码 
<!-- index.wxml -->
<view>
  <view class="content" style="padding-left: {{deviceInFo.safeArea.left || 10}}px">
    <view class="canvas_box">
      <!-- 定位到canvas画布的下方作为背景 -->
      <view class="canvas_tips">
        签字区
      </view>
      <!-- canvas画布 -->
      <canvas class="canvas_content" type="2d" style='width:{{canvasWidth}}px; height:{{canvasHeight}}px' id="myCanvas" bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove" bindtouchend="bindtouchend" bindtouchcancel="bindtouchcancel"></canvas>
    </view>
  </view>
  <!-- footer -->
  <view class="footer" style="padding-left: {{deviceInFo.safeArea.left}}px">
    <van-button plain class="item" block icon="replay" bind:click="overwrite" type="warning">清除重写</van-button>
    <van-button plain class="item" block icon="revoke" bind:click="prev" type="danger">撤销</van-button>
    <van-button class="item" block icon="passed" bind:click="confirm" type="info">提交</van-button>
  </view>
</view>
<!-- 提示框组件 -->
<van-toast id="van-toast" />

2、index.less

css 复制代码 
.content {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 10px;
  .canvas_box {
    width: 100%;
    height: 100%;
    background-color: #E8E9EC;
    position: relative;
    // 定位到canvas画布的下方作为背景
    .canvas_tips {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      font-size: 80px;
      color: #E2E2E2;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    // .canvas_content {
    //   width: 100%;
    //   height: 100%;
    // }
  }
}
// 底部按钮
.footer {
  box-sizing: border-box;
  padding: 20rpx 0;
  z-index: 2;
  background-color: #ffffff;
  text-align: center;
  position: fixed;
  width: 100%;
  box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.1);
  left: 0;
  bottom: 0;
  display: flex;

  .item {
    flex: 1;
    margin: 0 10rpx;
  }

  .scan {
    width: 80rpx;
    margin: 0 10rpx;
  }

  .moreBtn {
    width: 150rpx
  }
}

3、index.js

javascript 复制代码 
// index.js
// 获取应用实例
// import request from "../../request/index";
import Toast from '@vant/weapp/toast/toast';

const app = getApp()
Page({
  data: {
    // expertId: '', // 专家id
    deviceInFo: {}, // 设备信息
    canvasWidth: '', // 画布宽
    canvasHeight: '', // 画布高
    canvas: null, // Canvas 对象实例
    ctx: null, // Canvas 对象上下文实例
    historyImag: [], // 历史记录，每一笔动作完成后的图片数据，用于每一次回退上一步是当作图片绘制到画布上
    fileList: [], // 签名后生成的附件
    initialCanvasImg: '', // 初始画布图,解决非ios设备重设置宽高不能清空画布的问题
  },
  onReady() {
    // 获取可使用窗口的宽高，赋值给Canvas（宽高要减去上下左右padding的20，以及高度要减去footer区域）
    wx.createSelectorQuery()
      .select('.footer') // canvas获取节点
      .fields({ node: true, size: true }) // 获取节点的相关信息，node：是否返回节点对应的 Node 实例，size：是否返回节点尺寸
      .exec((res) => {
        console.log('res', res);
        // 获取手机左侧安全区域(刘海)
        const deviceInFo = wx.getSystemInfoSync()
        const canvasWidth = deviceInFo.windowWidth - 20 - deviceInFo?.safeArea?.left || 0
        const canvasHeight = deviceInFo.windowHeight - res[0].height - 20
        this.setData({
          deviceInFo,
          canvasWidth,
          canvasHeight
        })
        this.initCanvas('init')
      })
  },
  onLoad(option) {
    wx.setNavigationBarTitle({
      title: '电子签名'
    })
    // const {expertId} = option
    // this.setData({expertId})
  },
  // 初始话Canvas画布
  initCanvas(type) {
    let ctx = null
    let canvas = null
    let {historyImag, canvasWidth, canvasHeight, deviceInFo, initialCanvasImg} = this.data
    // 获取Canvas画布以及渲染上下文
    wx.createSelectorQuery()
      .select('#myCanvas') // canvas获取节点
      .fields({ node: true, size: true }) // 获取节点的相关信息，node：是否返回节点对应的 Node 实例，size：是否返回节点尺寸
      .exec((res) => { // 执行所有的请求。请求结果按请求次序构成数组
        // Canvas 对象实例
        canvas = res[0].node
        // Canvas 对象上下文实例（动画动作绘图等都是在他的身上完成）
        ctx = canvas.getContext('2d')
        // Canvas 画布的实际绘制宽高
        const width = res[0].width
        const height = res[0].height
        // 获取设备像素比
        const dpr = wx.getWindowInfo().pixelRatio
        // 初始化画布大小
        canvas.width = width * dpr
        canvas.height = height * dpr
        // 画笔的颜色
        ctx.fillStyle = 'rgb(200, 0, 0)';
        // 指定了画笔（绘制线条）操作的线条宽度
        ctx.lineWidth = 5
        // 如果存在历史记录，则将历史记录最新的一张图片拿出来进行绘制。非ios时直接加载一张初始的空白图片
        if(historyImag.length !== 0 || (deviceInFo.platform !== 'ios' && type !== 'init')) {
          // 图片对象
          const image = canvas.createImage()
          // 图片加载完成回调
          image.onload = () => {
            // 将图片绘制到 canvas 上
            ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight)
          }
          // 设置图片src
          image.src = historyImag[historyImag.length - 1] || initialCanvasImg;
        }
        // 缩小/放大图像
        ctx.scale(dpr, dpr)
        this.setData({canvas, ctx})
        // 保存一张初始空白图片
        if(type === 'init') {
          wx.canvasToTempFilePath({
            canvas,
            png: 'png',
            success: res => {
              // 生成的图片临时文件路径
              const tempFilePath = res.tempFilePath
              this.setData({initialCanvasImg: tempFilePath})
            },
          })
        }
      })
  },
  // 手指触摸动作开始
  bindtouchstart(event) {
    this.addPathDrop(event)
  },
  // 手指触摸后移动	
  bindtouchmove(event) {
    this.addPathDrop(event)
  },
  // 手指触摸动作结束
  bindtouchend(event) {
    this.addPathDrop(event)
  },
  // 手指触摸动作被打断，如来电提醒，弹窗
  bindtouchcancel(event) {
    this.addPathDrop(event)
  },
  // 添加路径点
  addPathDrop(event) {
    let {ctx, historyImag, canvas} = this.data
    let {type, changedTouches} = event
    let {x, y} = changedTouches[0]
    if(type === 'touchstart') { // 每次开始都是一次新动作
      // 最开始点
      ctx.moveTo(x, y) // 设置绘图起始坐标。
    } else {
      // 上一段终点
      ctx.lineTo(x, y) // 从最后一点到点(x,y)绘制一条直线。
      // 绘制
      ctx.stroke();
      // 下一段起点
      ctx.moveTo(x, y) // 设置绘图起始坐标。
    }
    // 每一次结束或者意外中断，保存一份图片到历史记录中
    if(type === 'touchend' || type === 'touchcancel') {
      // 生成图片
      // historyImag.push(canvas.toDataURL('image/png'))
      wx.canvasToTempFilePath({
        canvas,
        png: 'png',
        success: res => {
          // 生成的图片临时文件路径
          const tempFilePath = res.tempFilePath
          historyImag.push(tempFilePath)
          this.setData(historyImag)
        },
      })
    }
  },
  // 上一步
  prev() {
    this.setData({
      historyImag: this.data.historyImag.slice(0, this.data.historyImag.length - 1)
    })
    this.initCanvas()
  },
  // 重写
  overwrite() {
    this.setData({
      historyImag: []
    })
    this.initCanvas()
  },
  // 提交
  confirm() {
    const {canvas, historyImag} = this.data
    if(historyImag.length === 0) {
      Toast.fail('请先签名后保存！');
      return
    }
    // 生成图片
    wx.canvasToTempFilePath({
      canvas,
      png: 'png',
      success: res => {
        // 生成的图片临时文件路径
        const tempFilePath = res.tempFilePath
        // 保存图片到系统
        wx.saveImageToPhotosAlbum({
          filePath: tempFilePath,
        })
        // this.beforeRead(res.tempFilePath)
      },
    })
  },
  // // 图片上传
  // async beforeRead(tempFilePath) {
  //   const that = this;
  //   wx.getImageInfo({
  //     src: tempFilePath,
  //     success(imageRes) {
  //       wx.uploadFile({
  //         url: '', // 仅为示例，非真实的接口地址
  //         filePath: imageRes.path,
  //         name: 'file',
  //         header: {token: wx.getStorageSync('token')},
  //         formData: {
  //           ext: imageRes.type
  //         },
  //         success(fileRes) {
  //           const response = JSON.parse(fileRes.data);
  //           if (response.code === 200) {
  //             that.setData({
  //               fileList: [response.data]
  //             })
  //             that.submit();
  //           } else {
  //             wx.hideLoading();
  //             Toast.fail('附件上传失败');
  //             return false;
  //           }
  //         },
  //         fail(err) {
  //           wx.hideLoading();
  //           Toast.fail('附件上传失败');
  //         }
  //       });
  //     },
  //     fail(err) {
  //       wx.hideLoading();
  //       Toast.fail('附件上传失败');
  //     }
  //   })
  // },
  // 提交
  // submit() {
  //   const {fileList} = this.data
  //   wx.showLoading({title: '提交中...',})
  //   request('post', '', {
  //     fileIds: fileList.map(item => item.id),
  //   }).then(res => {
  //     if (res.code === 200) {
  //       wx.hideLoading();
  //       Toast.success('提交成功！');
  //       setTimeout(() => {
  //         wx.navigateBack({delta: 1});
  //       }, 1000)
  //     }
  //   })
  // },
})
相关推荐
Cachel wood9 分钟前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端11 分钟前
0基础学前端-----CSS DAY9
前端·css
joan_8515 分钟前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
m0_748236111 小时前
Calcite Web 项目常见问题解决方案
开发语言·前端·rust
Watermelo6171 小时前
详解js柯里化原理及用法，探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
m0_748248941 小时前
HTML5系列（11）-- Web 无障碍开发指南
前端·html·html5
m0_748235611 小时前
从零开始学前端之HTML（三）
前端·html
一个处女座的程序猿O(∩_∩)O3 小时前
小型 Vue 项目，该不该用 Pinia 、Vuex呢？
前端·javascript·vue.js
hackeroink6 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
迷雾漫步者8 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10红米手机使用google play