H5 핸드메이드 전자 서명 실현

최근의 한 항목은 사용자의 전자 계약 서명에 관한 문제가 있어서, 말을 많이 하지 않고 코드에 직접 올린다

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();
        }
    }
}

가로스크린의 실현

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: 느낌이 좀 이상해요. 가로화면 이후 애플 핸드폰은 아무런 변화가 필요 없어요. 안드로이드 핸드폰은 높이를 넓이에 줘야 해요. 무슨 이유인지 모르겠지만 이렇게 하면 효과가 있어요.