image.png

1.先用canvas实现记录手指的移动轨迹（主要是三个事件，ontouchstart,ontouchmove,ontouchend）

        let context = theCanvas.getContext('2d')
        let isAllowDrawLine = false
        theCanvas.ontouchstart = function(e) {
            isAllowDrawLine = true
            let ele = windowToCanvas(theCanvas, e.changedTouches[0].pageX, e.changedTouches[0].pageY)
            let { x, y } = ele
            context.moveTo(x, y)
            theCanvas.ontouchmove = (e) => {
                if (isAllowDrawLine) {
                    let ele = windowToCanvas(theCanvas, e.changedTouches[0].pageX, e.changedTouches[0].pageY)
                    let { x, y } = ele
                    context.lineTo(x, y)
                    context.stroke()
                }
            }
        }
        theCanvas.ontouchend = ()=>{
            isAllowDrawLine = false
        }

2.签名完成之后，把canvas转化成文件格式上传（改事件可以放在ontouchend里面）

            var imageData =  theCanvas.toDataURL('image/png')  //获取到的是base64格式的文件
            //转成blob格式
            this.$refs.myimage.src = imageData;
            let binary = atob(imageData.split(',')[1]);  
            let array = [];
            for(let i = 0; i < binary.length; i++) {
                array.push(binary.charCodeAt(i));
            }
            let dataImg = new Blob([new Uint8Array(array)], {type:'image/jpeg'});

3.目前还存在一个问题是，这种方式上传给服务器之后，文件变成blob格式，需要后台配合更改后缀。