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


Posted in HTML / CSS onMay 20, 2020

今天公司有一个新的需求,就是要在返回的作业照片里面可以涂鸦批改,批改完后就连同批改后的照片上传到服务器。这对我不怎么熟悉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 批改作业插件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS心形加载的动画源码的实现
Mar 09 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
CSS 圆形进度栏
Apr 06 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 #HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 #HTML / CSS
html5简介及新增功能介绍
May 18 #HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 #HTML / CSS
Html5在手机端调用相机的方法实现
May 13 #HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 #HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 #HTML / CSS
You might like
php学习之 循环结构实现代码
2011/06/09 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
python实现rsa加密实例详解
2017/07/19 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
Python读取csv文件实例解析
2019/12/30 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
《乌塔》教学反思
2014/02/17 职场文书
2015年度保密工作总结
2015/04/24 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python