基于html5 canvas做批改作业的小插件
今天公司有一个新的需求,就是要在返回的作业照片里面可以涂鸦批改,批改完后就连同批改后的照片上传到服务器。这对我不怎么熟悉canvas的人来说是个挑战。
需求分析
- 能进行批改,就是相当于画笔
- 能进行画笔的撤回功能
- 能进行全部画笔的清除功能
- 可以转化画笔的颜色
技术上的实现思路
在听到这需求后的第一反应就是用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 批改作业插件内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
下一篇: jvm局部变量表