时间:2021-05-08
今天公司有一个新的需求,就是要在返回的作业照片里面可以涂鸦批改,批改完后就连同批改后的照片上传到服务器。这对我不怎么熟悉canvas的人来说是个挑战。
需求分析
技术上的实现思路
在听到这需求后的第一反应就是用canvas来做,所以我在w3school阅读了 canvas的API .
1.将图片转到canvas,用到API: drawImage()
2画笔的实现
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上的图片也变小了...
解决办法:(待解决)
总结
到此这篇关于基于html5 canvas做批改作业的小插件的文章就介绍到这了,更多相关canvas 批改作业插件内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了javaweb文件打包批量下载,供大家参考,具体内容如下//批量下载未批改作业@RequestMapping(value="/downloa
钉钉群管理员不一定可以批改作业,添加作业的人,只要他的身份是老师的话,他都可以留作业批作业,这是他们特有的权限。 钉钉(DingTalk)是阿里巴巴集团专为中
最近都在学习HTML5,做canvas游戏之类的,发现HTML5中除了canvas这个强大的工具外,还有WebSocket也很值得注意。可以用来做双屏互动游戏,
使用HTML5制作时钟复制代码代码如下:html5时钟varClock=function(canvas,options){this.canvas=canvas;
今天要推荐的是9款非常有意思的HTML5动画,这些动画有些是基于Canvas的,有些是SVG结合HTML5实现的,让我们一起来看看。1、HTML5梦幻可给任意元