基于html5 canvas做批改作业的小插件

let self = this;    this.canvasNode = document.createElement('canvas');    let styleString = this.utils.formatStyle(CANVAS_STYLE); // CANVAS_STYLE是canvas的样式    this.canvasNode.setAttribute('id','canvas');    // 一定要设置这width 和 height    let ratio = this.imgNode.width / this.imgNode.height, height = this.imgNode.height, width = this.imgNode.width;    let tempWidth , tempHeight;    // 按比例伸缩    if(ratio >= window.innerWidth / window.innerHeight){      if(width > window.innerWidth){        tempWidth = window.innerWidth;        tempHeight = height * window.innerWidth / width;      } else {        tempWidth = width;        tempHeight = height;      }    }else{      if(height > window.innerHeight){        tempWidth = width * window.innerHeight / width;        tempHeight = window.innerHeight;      }else{        tempWidth = width;        tempHeight = height;      }    }    this.canvasNode.height = tempHeight;    this.canvasNode.width = tempWidth;    styleString = Object.assign({'width': tempWidth, 'height': tempHeight}, CANVAS_STYLE);    this.canvasNode.setAttribute('style', styleString);    let ctx = this.canvasNode.getContext('2d'), startX = 0, startY = 0;    let image = new Image() ;    image.setAttribute("crossOrigin",'Anonymous')    // 加时间戳因为这图片的域名没设置跨域https://www.jianshu.com/p/c3aa975923de    image.src = this.imgNode.src + '?t=' + new Date().getTime();     image.height = tempHeight;    image.width = tempWidth;    image.onload = function(){      ctx.drawImage(image, 0, 0, tempWidth, tempHeight);    }    // 鼠标移动事件    let mousemoveFn = function(e) {      ctx.beginPath();      ctx.lineWidth = 3;      ctx.strokeStyle = self.currentColor;      if(startX == e.clientX - self.canvasNode.offsetLeft || startY ===  e.clientY - self.canvasNode.offsetTop  ) return      ctx.moveTo(startX,startY);      ctx.lineTo(e.clientX - self.canvasNode.offsetLeft , e.clientY - self.canvasNode.offsetTop );      ctx.stroke();      startX = e.clientX - self.canvasNode.offsetLeft;      startY = e.clientY - self.canvasNode.offsetTop ; // 37是header的高度    }    // 鼠标按下事件    this.canvasNode.addEventListener("mousedown",function(e){      startX = e.clientX - self.canvasNode.offsetLeft;      startY = e.clientY - self.canvasNode.offsetTop ;      // 如果在mouseup那里记录 则在撤回时候要做多一个步骤      let imageData = ctx.getImageData(0,0, self.canvasNode.width, self.canvasNode.height);      self.imageDataArray.push(imageData); // 这imageDataArray用来记录画笔的笔画      self.canvasNode.addEventListener("mousemove", mousemoveFn, false);    },false);    this.canvasNode.addEventListener('mouseup', function(e){      self.canvasNode.removeEventListener('mousemove', mousemoveFn);    });    this.bgNode.appendChild(this.canvasNode);