image.png

1.先用canvas實(shí)現(xiàn)記錄手指的移動(dòng)軌跡（主要是三個(gè)事件，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轉(zhuǎn)化成文件格式上傳（改事件可以放在ontouchend里面）

            var imageData =  theCanvas.toDataURL('image/png')  //獲取到的是base64格式的文件
            //轉(zhuǎn)成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.目前還存在一個(gè)問題是，這種方式上傳給服務(wù)器之后，文件變成blob格式，需要后臺(tái)配合更改后綴。