H5实现手写电子签名

最新推荐文章于 2025-06-19 16:33:29 发布

原创最新推荐文章于 2025-06-19 16:33:29 发布 · 1.1w 阅读

20 ·

CC 4.0 BY-SA版权

webapp 专栏收录该内容

2 篇文章

订阅专栏

该博客围绕用户电子合同签名项目展开，主要讲述了横屏的实现。其中提到横屏后苹果手机无需改变，安卓手机需将高度赋给宽度来实现效果，但未明确原因。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近的一个项目有关于用户电子合同签名的问题，话不多说直接上代码

<template>
    <div class="page-content">
        <mf1-header title="用户需求签名">
          <mf1-button slot="right" @tap="handelClearEl()" type="danger">清除</mf1-button>
          <mf1-button slot="right" @tap="saveImage()" type="danger">保存</mf1-button>
        </mf1-header>
        <div class="sign-content">
            <div class="div_canvas_container">
              <canvas id="signCanvas"></canvas>
            </div>
        </div>
    </div>
</template>

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 = 2;
            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() {
          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;
            if(this.digitaSignType == "partyA"){
                this.$store.commit("SET_PAERT_A_IMG", imgBase64)
            }else{
                this.$store.commit("SET_PAERT_B_IMG", imgBase64)
            }
            mui.back();
        }
    }
}
</script>

<style lang="scss">
    .div_canvas_container {
				// margin-top: 1.35rem;
				width: 100vw;
				height: 100vh;
        overflow: hidden;
		}
      #signCanvas{
				width: 100%;
				height: 100%;
				background: #FFFFFF;
				border: none;
        box-sizing: border-box;
        overflow: hidden;
			}
</style>

横屏的实现

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
              oCanvas.width = oCanvas.offsetWidth*rate;
              oCanvas.height = oCanvas.offsetHeight*rate;
            } else if (/(Android)/i.test(navigator.userAgent)) {
              //Android终端
              oCanvas.width = oCanvas.offsetHeight*rate;
              oCanvas.height = oCanvas.offsetWidth*rate;
            }

ps：感觉有点诡异，横屏以后苹果手机不需要任何改变，安卓手机需要把高度赋给宽度，不知道是什么原因，只是这样可以实现效果