效果图

Paste_Image.png

基于vue,可以保存上传
项目地址 vue-signature

实现

1.canvas画图,参考 jrainlau

<script>
var draw;
var preHandler = function(e){e.preventDefault();}
class Draw {
    constructor(el) {
        this.el = el
        this.canvas = document.getElementById(this.el)
        this.cxt = this.canvas.getContext('2d')
        this.stage_info = canvas.getBoundingClientRect()
        this.path = {
            beginX: 0,
            beginY: 0,
            endX: 0,
            endY: 0
        }
    }
    init(btn) {
        var that = this; 

        this.canvas.addEventListener('touchstart', function(event) {
            document.addEventListener('touchstart', preHandler, false); 
            that.drawBegin(event)
        })
        this.canvas.addEventListener('touchend', function(event) { 
            document.addEventListener('touchend', preHandler, false); 
            that.drawEnd()
            
        })
        this.clear(btn)
    }
    drawBegin(e) {
        var that = this;
        window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty()
        this.cxt.strokeStyle = "#000"
        this.cxt.beginPath()
        this.cxt.moveTo(
            e.changedTouches[0].clientX - this.stage_info.left,
            e.changedTouches[0].clientY - this.stage_info.top
        )
        this.path.beginX = e.changedTouches[0].clientX - this.stage_info.left
        this.path.beginY = e.changedTouches[0].clientY - this.stage_info.top
        canvas.addEventListener("touchmove",function(){
            that.drawing(event)
        })
    }
    drawing(e) {
        this.cxt.lineTo(
            e.changedTouches[0].clientX - this.stage_info.left,
            e.changedTouches[0].clientY - this.stage_info.top
        )
        this.path.endX = e.changedTouches[0].clientX - this.stage_info.left
        this.path.endY = e.changedTouches[0].clientY - this.stage_info.top
        this.cxt.stroke()
    }
    drawEnd() {
        document.removeEventListener('touchstart', preHandler, false); 
        document.removeEventListener('touchend', preHandler, false);
        document.removeEventListener('touchmove', preHandler, false);
        //canvas.ontouchmove = canvas.ontouchend = null
    }
    clear(btn) {
        this.cxt.clearRect(0, 0, 300, 600)
    }
    save(){
       return canvas.toDataURL("image/png")
    }
}

export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      val:true,
      url:""
    }
  },
  mounted() {
      draw=new Draw('canvas');
      draw.init();
  },
  methods:{
    clear:function(){
        draw.clear();
    },
    save:function(){
        var data=draw.save();
        this.url = data;
        console.log(data)
    }
  }
}
</script>

2.移动端事件监听,参考 [BlandonTsai(http://www.caihaibo.cn/author/blandon)

var preHandler = function(e){e.preventDefault();}
document.addEventListener('touchmove', preHandler, false);
document.removeEventListener('touchmove', preHandler, false);

遇到的问题

移动端的事件监听