pc,h5电子签名

<template>
    <div class="div_canvas_container">
        <div>
            <button slot="right" @click="handelClearEl()" type="danger">清除</button>
            <button slot="right" @click="saveImage()" type="danger">保存</button>
        </div>
        
        <div class="sign-content">
                <canvas id="signCanvas" width="500" height="400" style="border:1px dashed #ccc"></canvas>
        </div>
        <!--<canvas id="test" width="500" height="500" style="border: 1px solid #ccc; margin-top:260px"></canvas>-->
    </div>
</template>
<script>
export default {
    name: 'digitaSign',
    data(){
        return {
            imgSrc:""
        }
    },
    mounted(){
        //横屏
        // 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;
        //     }
    let vm = this;
    // this.$nextTick(()=>{
    //     setTimeout(function(){
    //         vm.init();
    //     }, 100)
        
    // });
    

        // let vm = this;
        vm.digitaSignType = vm.$route.query.type;
        this.$nextTick(()=>{
            setTimeout(()=>{
                vm.initCanvas()
            }, 100)
        });
    },
    methods:{
        init(){
            var canvas =document.getElementById("test");
            if(canvas.getContext){
                var ctx = canvas.getContext("2d");
            }
            
            canvas.onmousedown=function(ev){
                ev = ev || window.event;
                if(canvas.setCapture){
                    canvas.setCapture();
                }
                
                ctx.beginPath()
                ctx.moveTo(ev.clientX - canvas.offsetLeft, ev.clientY - canvas.offsetTop)
                document.onmousemove=function(ev){
                    ctx.save();
                    ctx.strokeStyle = '#000';
                    ctx.lineWidth = 5;
                    ev = ev || event;
                    ctx.lineTo(ev.clientX - canvas.offsetLeft, ev.clientY - canvas.offsetTop);
                    ctx.stroke();
                    ctx.restore();
                }
                document.onmouseup=function(){
                    document.onmousemove=document.onmouseup=null;
                    if(document.releaseCapture){
                        document.releaseCapture();
                    }
                }
                return false;
            }
        },
        initCanvas(){
            let rate = 2;
            let oCanvas = document.getElementById('signCanvas');
            var cxt = oCanvas.getContext("2d");
            //移动端
            if(window.navigator.appVersion && window.navigator.appVersion.indexOf('Mobile') > -1){
                oCanvas.width = oCanvas.offsetWidth*rate;
                oCanvas.height = oCanvas.offsetHeight*rate;
                oCanvas.height = "400";
                cxt.fillStyle = "#fff";
                cxt.fillRect(0,0,oCanvas.offsetWidth, oCanvas.height);
                cxt.lineWidth = 2*rate;
                cxt.strokeStyle = "#101010";
                var posX = 0;
                var posY = 0;
                var position = null;
                var parentPosintin = oCanvas.getBoundingClientRect();
            }
            
            //pc端
            oCanvas.onmousedown = function(ev){
                ev = ev || window.event;
                if(oCanvas.setCapture){
                    oCanvas.setCapture();
                }
                
                cxt.beginPath();
                cxt.moveTo(ev.clientX - oCanvas.offsetLeft, ev.clientY - oCanvas.offsetTop);
                document.onmousemove = function(ev){
                    cxt.save();
                    cxt.strokeStyle = '#000';
                    cxt.lineWidth = 3;
                    ev = ev || event;
                    cxt.lineTo(ev.clientX - oCanvas.offsetLeft, ev.clientY - oCanvas.offsetTop);
                    cxt.stroke();
                    cxt.restore();
                }
                document.onmouseup = function(){
                    document.onmousemove=document.onmouseup=null;
                    if(document.releaseCapture){
                        document.releaseCapture();
                    }
                }
                return false;
            };
            
            //手指触屏可记录此时的位置作为起点
            oCanvas.addEventListener('touchstart', function(e){
                posX = e.changedTouches[0].clientX;
                posY = e.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;
            console.log(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>
#test{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background:white;
}

    .div_canvas_container {
        /*margin-top: 1.35rem;*/
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    #signCanvas{
        width: 500px;
        /* height: 100%;*/
        background: #FFFFFF;
        border: none;
        box-sizing: border-box;
        overflow: hidden;
    }

</style>