H5电子签名功能

忘是亡心i 2023-01-11 08:50 307阅读 0赞

#### 前言 ： 使用canvas来实现手写签名的功能 ####

#### 1.准备一张画布 ####

#### 2.利用JS设置画布的尺寸充满整个屏幕 ####

mounted() { 
        this.init()
        const canvas = this.$refs.signCanvas
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight - 64
        window.onresize = () => { 
          canvas.width = window.innerWidth
          canvas.height = window.innerHeight - 64
        }
      },

#### 3.设置绘画函数painting ，isSignature用来判断canvas是否有签名 ####

data() { 
        return { 
          painting: (beginX, beginY, stopX, stopY, ctx) => { 
            ctx.beginPath() // 开启一条新路径
            ctx.globalAlpha = 1 // 设置图片的透明度
            ctx.lineWidth = 3 // 设置线宽
            ctx.strokeStyle = 'red' // 设置路径颜色
            ctx.moveTo(beginX, beginY) // 从(beginX, beginY)这个坐标点开始画图
            ctx.lineTo(stopX, stopY) // 定义从(beginX, beginY)到(stopX, stopY)的线条（该方法不会创建线条）
            ctx.closePath() // 创建该条路径
            ctx.stroke() // 实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
          },
          isSignature: false, //是否签名
        }
      },

#### 4. 注册监听事件 ####

*  需要阻止默认事件，否则页面会跟着手势上下滑动。

init() { 
          let beginX, beginY
          const canvas = this.$refs.signCanvas
          const ctx = canvas.getContext('2d')
          ctx.fillStyle = '#fff'
          ctx.fillRect(0, 0, canvas.width, canvas.height)
          canvas.addEventListener('touchstart', function (event) { 
            event.preventDefault() // 阻止在canvas画布上签名的时候页面跟着滚动
            beginX = event.touches[0].clientX - this.offsetLeft
            beginY = event.touches[0].pageY - this.offsetTop
          })
          canvas.addEventListener('touchmove', (event) => { 
            event.preventDefault() // 阻止在canvas画布上签名的时候页面跟着滚动
            event = event.touches[0]
            let stopX = event.clientX - canvas.offsetLeft
            let stopY = event.pageY - canvas.offsetTop
            this.painting(beginX, beginY, stopX, stopY, ctx)
            beginX = stopX // 这一步很关键，需要不断更新起点，否则画出来的是射线簇
            beginY = stopY
            this.isSignature = true
          })
        },

#### 5. 保存或清空画布 ####

save() { 
          if (!this.isSignature) { 
            this.$toast.loading({ 
              message: '请先签名',
            })
    
            return false
          }
          const dom = this.$refs.signCanvas
          const base64File = dom.toDataURL('image/png', 1.0)
          return base64File
        },

rewrite() { 
          const canvasTxt = this.$refs.signCanvas.getContext('2d')
          canvasTxt.clearRect(
            0,
            0,
            this.$refs.signCanvas.width,
            this.$refs.signCanvas.height
          )
          this.isSignature = false
        },

#### 6.补充其他情况 ####

*  将base64转换为文件对象

dataURLtoFile(dataurl, filename) { 
          let arr = dataurl.split(',')
          let data = arr[0].match(/:(.*?);/)[1]
          let bstr = atob(arr[1])
          let n = bstr.length
          let u8arr = new Uint8Array(n)
          while (n--) { 
            u8arr[n] = bstr.charCodeAt(n)
          }
          return new File([u8arr], filename, {  type: data })
        },

*  利用html2canvas插件将base64转换为PDF并打印

save() { 
          if (!this.isSignature) { 
            this.$toast.loading({ 
              message: '请先签名',
            })
    
            return false
          }
          const dom = this.$refs.signCanvas
    	    html2Canvas(dom, { 
    	      allowTaint: true,
    	      width: dom.offsetWidth, //设置获取到的canvas宽度
    	      height: dom.offsetHeight, //设置获取到的canvas高度
    	      x: 0, //页面在水平方向滚动的距离
    	      y: 0, //页面在垂直方向滚动的距离
    	    }).then((canvas) => { 
    	      let canvasWidth = canvas.width;
    	      let canvasHeight = canvas.height;
    	      let pageHeight = (canvasWidth / 592.28) * 841.89; // 一页A4 pdf能显示的canvas高度
    	      let imgWidth = 595.28; // 设置图片宽度和A4纸宽度相等
    	      let imgHeight = (592.28 / canvasWidth) * canvasHeight;//等比例换算成A4纸的高度
    	      let totalHeight = imgHeight; // 需要打印的图片总高度，初始状态和图片高度相等
    	      let pageData = canvas.toDataURL('image/png', 1.0);
    	      let PDF = new JsPDF('p', 'pt', 'a4', true);
    	      if (totalHeight < pageHeight) {  //
    	        PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight); // 从顶部开始打印
    	      } else { 
    	        let top = 0;   // 打印初始区域
    	        while (totalHeight > 0) { 
    	          PDF.addImage(pageData, 'JPEG', 0, top, imgWidth, imgHeight);  // 从图片顶部往下top位置开始打印
    	          totalHeight -= pageHeight;
    	          top -= 841.89;
    	          if (totalHeight > 0) { 
    	            PDF.addPage();
    	          }
    	        }
    	      }
    	      PDF.save('test.pdf');
    	    });
    }