根据html5 canvas做批阅工作的小软件

日期:2021-02-22 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

今日企业有1个新的要求,便是要在回到的工作相片里边能够涂鸦批阅,批阅完后就连同批阅后的相片提交到服务器。这对我不如何熟习canvas的人来讲是个挑戰。

要求剖析

  1. 能开展批阅,便是非常于画笔
  2. 能开展画笔的撤回作用
  3. 能开展所有画笔的消除作用
  4. 能够转换画笔的色调

技术性上的完成思路

  在听到这要求后的第1反映便是用canvas来做,因此我在w3school阅读文章了 canvas的API .

1.将照片转到canvas,用到API: drawImage()

2画笔的完成

  • 当按下电脑鼠标(mousedown)纪录刚开始点startX, startY
  • 当挪动电脑鼠标的情况下(mousemove)就获得当今的电脑鼠标的座标e.clientX, e.clientY,获得到了当今的座标后,与上1个点的座标轴的左侧开展连线(lineTo ),这样就可以画出了1条横线了
  • 当电脑鼠标松开左键(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');
    // 1定要设定这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那里纪录 则在撤回情况下要做多1个流程
      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上的照片也缩小了...

处理方法:(待处理)

总结

  • 第1次触碰canvas与照片相融合的作用,让我熟习了canvas的api
  • 在遇到没做过的作用以前,1定要先定下心来应用你所了解的专业知识思索下有没可行的方式,寻找了提升点便可以做了
  • 在你碰上不熟习的专业知识情况下,1定要先看api,我这canvas以前不如何会的,以后我细看了几遍的api,我便可以上手去做作用了,而且在w3school看到的事例让我感觉canvas真的很强劲

到此这篇有关根据html5 canvas做批阅工作的小软件的文章内容就详细介绍到这了,更多有关canvas 批阅工作软件內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!