H5实现在线签名，解决页面滑动的问题

2024-07-10 11:14| 来源: 网络整理| 查看: 265

原理

实现在线签名功能，主要是依托canvas技术。首先生成画布、初始画笔对象，然后为画布添加touch事件监听，通过事件触发绘制文字。保存时通过canvas的toDataURL方法生成base64图片文件进行下一步操作。

基于vue的demo实现

清除保存 body { position: initial; height: auto; } .div_canvas_container { width: 100vw; height: 80vh; overflow: hidden; } #signCanvas { width: 100%; height: 100%; background: #fff; border: none; box-sizing: border-box; overflow: hidden; } export default { //数字签名 name: 'digitaSign', data() { return { imgsrc: '', } }, mounted() { let vm = this vm.digitaSignType = vm.$route.query.type this.$nextTick(() => { setTimeout(() => { vm.initCanvas() }, 100) }) }, methods: { initCanvas() { let rate = 1 let oCanvas = document.getElementById('signCanvas') oCanvas.width = oCanvas.offsetWidth * rate oCanvas.height = oCanvas.offsetHeight * rate let cxt = oCanvas.getContext('2d') cxt.fillStyle = '#fff' cxt.fillRect(0, 0, oCanvas.width, oCanvas.height) cxt.lineWidth = 2 * rate cxt.strokeStyle = '#101010' let posX = 0 //x坐标 let posY = 0 //y坐标 let position = null let parentPosintin = oCanvas.getBoundingClientRect() //手指触摸屏幕可记录此时的位置作为起点 oCanvas.addEventListener('touchstart', function (event) { posX = event.changedTouches[0].clientX posY = event.changedTouches[0].clientY - parentPosintin.top + 0.5 cxt.beginPath() cxt.moveTo(posX * rate, posY * rate) }) //手指屏滑动画线 oCanvas.addEventListener('touchmove', function (event) { optimizedMove(event) }) let requestAnimationFrame = window.requestAnimationFrame let optimizedMove = requestAnimationFrame ? function (e) { requestAnimationFrame(function () { move(e) }) } : move function move(event) { posX = event.changedTouches[0].clientX + 0.5 posY = event.changedTouches[0].clientY - parentPosintin.top + 0.5 cxt.lineTo(posX * rate, posY * rate) cxt.stroke() } }, // 清除画板 handelClearEl() { console.log(111) let oCanvas = document.getElementById('signCanvas') let cxt = oCanvas.getContext('2d') cxt.clearRect(0, 0, oCanvas.width, oCanvas.height) }, //保存为图片 saveImage() { let oCanvas = document.getElementById('signCanvas') let imgBase64 = oCanvas.toDataURL() this.imgsrc = imgBase64 console.log(imgBase64) if (this.digitaSignType == 'partyA') { this.$store.commit('SET_PAERT_A_IMG', imgBase64) } else { this.$store.commit('SET_PAERT_B_IMG', imgBase64) } }, }, }

在PC端运行这段代码基本上没有问题了，但在真正完成功能部署后你会发现，在微信公众号打开或是其他移动端浏览器打开时都会出现和浏览器原生滑动事件冲突的现象，例如微信公众号里写‘丨’的时候会造成浏览器页面下拉，所写笔画会出现中断，严重影响用户体验，那么你需要添加如下代码：

document.body.addEventListener('touchmove', function (e) { e.preventDefault(); }, { passive: false });

以上代码阻止了touchmove事件的默认行为，从而防止了浏览器页面的滑动。

【本文地址】

公司简介

联系我们