基于html5 canvas做批改作業(yè)的小插件

發(fā)布時(shí)間：2020-05-20 15:08:45 作者：佚名

這篇文章主要介紹了基于html5 canvas做批改作業(yè)的小插件的相關(guān)資料,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

今天公司有一個(gè)新的需求，就是要在返回的作業(yè)照片里面可以涂鴉批改，批改完后就連同批改后的照片上傳到服務(wù)器。這對我不怎么熟悉canvas的人來說是個(gè)挑戰(zhàn)。

需求分析

能進(jìn)行批改，就是相當(dāng)于畫筆
能進(jìn)行畫筆的撤回功能
能進(jìn)行全部畫筆的清除功能
可以轉(zhuǎn)化畫筆的顏色

技術(shù)上的實(shí)現(xiàn)思路

在聽到這需求后的第一反應(yīng)就是用canvas來做，所以我在w3school閱讀了 canvas的API .

1.將圖片轉(zhuǎn)到canvas，用到API： drawImage()

2畫筆的實(shí)現(xiàn)

當(dāng)按下鼠標(biāo)(mousedown)記錄開始點(diǎn)startX, startY
當(dāng)移動鼠標(biāo)的時(shí)候(mousemove)就獲取當(dāng)前的鼠標(biāo)的坐標(biāo)e.clientX, e.clientY，獲取到了當(dāng)前的坐標(biāo)后，與上一個(gè)點(diǎn)的坐標(biāo)軸的左邊進(jìn)行連線(lineTo )，這樣就能畫出了一條橫線了
當(dāng)鼠標(biāo)松開左鍵(mouseup)時(shí)候，就清除mousemove的函數(shù)

3.清除功能：講原始的圖片再次用drawImage()函數(shù)來重置
4.撤回功能：在每次按下鼠標(biāo)那時(shí)候，用getImageData()函數(shù)獲取當(dāng)前的圖像記錄到數(shù)組里面，然后按撤回則使用putImageData()函數(shù)放在canvas
5.畫筆的顏色：在mousemove里面改變strokeStyle筆的顏色

代碼實(shí)現(xiàn)

移動鼠標(biāo)畫出線條的代碼

let self = this;
    this.canvasNode = document.createElement('canvas');
    let styleString = this.utils.formatStyle(CANVAS_STYLE); // CANVAS_STYLE是canvas的樣式
    this.canvasNode.setAttribute('id','canvas');
    // 一定要設(shè)置這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')
    // 加時(shí)間戳因?yàn)檫@圖片的域名沒設(shè)置跨域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);
    }
    // 鼠標(biāo)移動事件
    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的高度
    }
    // 鼠標(biāo)按下事件
    this.canvasNode.addEventListener("mousedown",function(e){
      startX = e.clientX - self.canvasNode.offsetLeft;
      startY = e.clientY - self.canvasNode.offsetTop ;

      // 如果在mouseup那里記錄 則在撤回時(shí)候要做多一個(gè)步驟
      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.圖片的跨域問題因?yàn)檫@個(gè)域名只設(shè)置了192.168.6.*的跨域，所以我localhost的域名會報(bào)跨域的問題(只對192.168.6.*的跨域是同事告訴我的，不然我還在傻乎乎的查問題)

解決辦法：設(shè)置vue.congfig.js文件的dev下的host

2.圖片的按比例伸縮完按保存后圖片的尺寸變了我用toDataURL()方法輸出的base64后的圖片尺寸變了。原因：在我把圖片draw上canvas上時(shí)候，用了上面代碼的圖片那比例伸縮的算法把圖片變小了，所以畫在canvas上的圖片也變小了...

解決辦法：(待解決)

總結(jié)

第一次接觸canvas與圖片相結(jié)合的功能，讓我熟悉了canvas的api
在遇到?jīng)]做過的功能之前，一定要先定下心來運(yùn)用你所知道的知識思考下有沒可行的方法，找到了突破點(diǎn)就可以做了
在你碰上不熟悉的知識時(shí)候，一定要先看api，我這canvas之前不怎么會的，之后我細(xì)看了幾遍的api，我就可以上手去做功能了，并且在w3school看到的例子讓我覺得canvas真的很強(qiáng)大

到此這篇關(guān)于基于html5 canvas做批改作業(yè)的小插件的文章就介紹到這了,更多相關(guān)canvas 批改作業(yè)插件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！