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

今天公司有一个新的需求，就是要在返回的作业照片里面可以涂鸦批改，批改完后就连同批改后的照片上传到服务器。这对我不怎么熟悉canvas的人来说是个挑战。

需求分析

1. 能进行批改，就是相当于画笔
2. 能进行画笔的撤回功能
3. 能进行全部画笔的清除功能
4. 可以转化画笔的颜色

技术上的实现思路

  在听到这需求后的第一反应就是用canvas来做，所以我在w3school阅读了 canvas的api .

1.将图片转到canvas，用到api： drawimage()

2画笔的实现

• 当按下鼠标(mousedown)记录开始点startx, starty
• 当移动鼠标的时候(mousemove)就获取当前的鼠标的坐标e.clientx, e.clienty，获取到了当前的坐标后，与上一个点的坐标轴的左边进行连线(lineto )，这样就能画出了一条横线了
• 当鼠标松开左键(mouseup)时候，就清除mousemove的函数

3.清除功能：讲原始的图片再次用drawimage()函数来重置
4.撤回功能：在每次按下鼠标那时候，用getimagedata()函数获取当前的图像记录到数组里面，然后按撤回则使用putimagedata()函数放在canvas
5.画笔的颜色：在mousemove里面改变strokestyle笔的颜色

代码实现

移动鼠标画出线条的代码

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);

遇到的问题

1.图片的跨域问题   因为这个域名只设置了192.168.6.*的跨域，所以我localhost的域名会报跨域的问题(只对192.168.6.*的跨域是同事告诉我的，不然我还在傻乎乎的查问题)

解决办法：设置vue.congfig.js文件的dev下的host

2.图片的按比例伸缩完按保存后图片的尺寸变了   我用todataurl()方法输出的base64后的图片尺寸变了。原因：在我把图片draw上canvas上时候，用了上面代码的图片那比例伸缩的算法把图片变小了，所以画在canvas上的图片也变小了...

解决办法：(待解决)

总结

• 第一次接触canvas与图片相结合的功能，让我熟悉了canvas的api
• 在遇到没做过的功能之前，一定要先定下心来运用你所知道的知识思考下有没可行的方法，找到了突破点就可以做了
• 在你碰上不熟悉的知识时候，一定要先看api，我这canvas之前不怎么会的，之后我细看了几遍的api，我就可以上手去做功能了，并且在w3school看到的例子让我觉得canvas真的很强大

到此这篇关于基于html5 canvas做批改作业的小插件的文章就介绍到这了,更多相关canvas 批改作业插件内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！