從web圖片裁剪出發：瞭解H5中的canvas

阿新 • • 發佈：2019-01-19

本篇內容不針對canvas文件對每個api進行逐個的詳解！

　　重說三，好了，現在進入正文。在上一回《從web圖片裁剪出發：瞭解H5中的blob》中我解釋了圖片在瀏覽器中以怎樣的形式留存，並且在最後一個example中演示了選擇圖片、預覽最後提交的過程。然而這個預覽並沒有起到什麼卵用，因為只能預覽不能處理，原圖片還是原圖片，預覽變得可有可無。這一篇我們就在預覽這一步裡做點手腳，加入處理圖片的功能。

　　我們先修改之前的example，既然要處理圖片，肯定要引入canvas，所以我們把原來img這個標籤去掉，取而代之的是canvas，並在js中加入對應的修改。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form name='test'>
    <input type="file" name='file'>
    <input type="submit" value="提交">
  </form>
  <canvas width 
="0" height="0"></canvas>
  <script>
    var canvas = document.querySelector('canvas'),
        ctx = canvas.getContext('2d'),
        preview = new Image();
    document.test.file.addEventListener('change', function() {
      var fr = new FileReader();
      fr.onload = function() {
        preview.src  
= this.result;
        canvas.width = preview.width;
        canvas.height = preview.height;
        drawImage();
      };
      fr.readAsDataURL(this.files[0]);
    })
    function drawImage() {
      ctx.drawImage(preview, 0, 0); //把圖片繪製到canvas上
    }
    document.test.addEventListener('submit', function(e) {
      e.preventDefault();
      var formData = new FormData(),
          xhr = new XMLHttpRequest(),
          mime = 'image/jpeg',
          dataUrl = canvas.toDataURL(mime, 0.8),  //取出base64
          data = atob(dataUrl.split(',')[1]),
          n = data.length,
          uInt8 = new Uint8Array(n),
          blob;
      while(n--) {
        uInt8[n] = data.charCodeAt(n);
      }
      blob = new Blob([uInt8.buffer], {type: mime});
      formData.append('file', blob, 'test.jpg');
      xhr.open('post', '/upload');
      xhr.send(formData);
    })
  </script>
</body>
</html>

　　之前example的canvas版實現了，現在我們加入處理圖片的功能。首先我們加入裁剪的功能，裁剪的引入必須先引入橡皮筋功能，就是一個選取框。一般我們見過的選取框是這樣的。

預覽的樣子

選取一部分的樣子

　　我們來分析下實現這樣一個功能需要做什麼。首先選取框有個開始點和結束點，在滑鼠按下去的時候確定開始點，在鬆開的時候確定結束點，在移動的時候還要不停的繪製。那麼繪製一個有選取框的內容分幾步呢？第一步是繪製底圖，第二步是繪製陰影，第三部還是繪製底圖，但是隻作用於選取框內部。最後想取消選取框怎麼辦，我們還要有個方法重置開始點和結束點，並且只繪製底圖。

　　我們一步一步來，首先確定開始點和結束點。

var sPoint = {},
        ePoint = {};
    canvas.addEventListener('mousedown', function(e) {
      if(e.button === 0) {
        sPoint.x = e.offsetX;
        sPoint.y = e.offsetY;
        sPoint.drag = true;
      }
    });

　　然後我們確定繪製陰影的的方法，並且在滑鼠按下去移動的時候不停的繪製。

function drawCover() {
      ctx.save();
      ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.restore();
    }
    canvas.addEventListener('mousemove', function(e) {
      if(e.button === 0 && sPoint.drag) {var nPoint = {
          x: e.offsetX,
          y: e.offsetY
        };
        ctx.save();    //clip要通過restore回覆
        ctx.clearRect(0, 0, canvas.width, canvas.height);    //畫布全清
        drawImage();    //繪製底圖
        drawCover();    //繪製陰影
        ctx.beginPath();    //開始路徑
        ctx.rect(sPoint.x, sPoint.y, nPoint.x - sPoint.x, nPoint.y - sPoint.y);    //設定路徑為選取框
        ctx.clip();    //擷取路徑內為新的作用區域
        drawImage();    //在選取框內繪製底圖
        ctx.restore();    //恢復clip擷取的作用範圍
      }
    });

　　最後我們新增鬆開滑鼠的事件監聽，鬆開左鍵為拖動結束，鬆開右鍵為復原

canvas.addEventListener('mouseup', function(e) {
      if(e.button === 0) {
        sPoint.drag = false;
        ePoint.x = e.offsetX;
        ePoint.y = e.offsetY;
      }else if(e.button === 2) {
        restore();
      }
    });
    function restore() {
      sPoint = {};
      ePoint = {};
      drawImage();
    }

　　由於右鍵會出現噁心的瀏覽器自帶選單欄，影響體驗，我們遮蔽它。

document.addEventListener('contextmenu', function(e) {
      e.preventDefault();
      e.stopPropagation();
    });

　　現在選取框有了，我們要開始截取了。新新增一個按鈕，然後新增點選監聽。

html程式碼

<form name='test'>
    <input type="file" name='file'>
    <button id="clip">裁剪</button>
    <input type="submit" value="提交">
  </form>

js程式碼

var clip = document.querySelector('#clip');
    clip.addEventListener('click', function(e) {
　　e.preventDefault();    //阻止預設事件，不然會觸發form的submit
      if(sPoint.x !== undefined && ePoint.x !== undefined) {
        var imgData = ctx.getImageData(sPoint.x, sPoint.y, ePoint.x - sPoint.x, ePoint.y - sPoint.y);    //把裁剪區域的圖片資訊提取出來
        ctx.clearRect(0, 0, canvas.width, canvas.height);    //清空畫布
        canvas.width = Math.abs(ePoint.x - sPoint.x);    //重置canvas的大小為新圖的大小
        canvas.height = Math.abs(ePoint.y - sPoint.y);
        ctx.putImageData(imgData, 0, 0);    //把提取出來的圖片資訊放進canvas中
        preview.src = canvas.toDataURL();    //裁剪後我們用新圖替換底圖，方便繼續處理
      }else {
        alert('沒有選擇區域');
      }
    });

　　現在我們裁剪後選擇提交，會發現伺服器生成的是裁剪後的圖片

　　裁剪的功能完成了，我們在來實現第二個功能：灰度。如果說裁剪的功能在於clip的用法，那麼灰度的實現是基於getImageData返回的物件的認識。這個物件中有一個屬性叫data，這是一個數組，以4個為一組，分別儲存了一個畫素red、green、blue、opacity四個資料。也就是當你的canvas尺寸為1*1時，它的ImageData.data元素為4個。

　　廢話不多說，直接給出實現的程式碼。

html程式碼

<form name='test'>
    <input type="file" name='file'>
    <button id="clip">裁剪</button>
    <button id="grey">灰度</button>
    <input type="submit" value="提交">
  </form>

js程式碼

var grey = document.querySelector('#grey');
    grey.addEventListener('click', function(e) {
　　e.preventDefault();
      var startX = 0, startY = 0, width = canvas.width, height = canvas.height;
      ctx.clearRect(0, 0, canvas.width, canvas.height);    //一如既往的先清空畫布，不然會處理含有選取框的圖片內容
      drawImage();    //繪製底圖
      var imgData = ctx.getImageData(startX, startY, width, height);   //把整個底圖的圖片內容取出來 
      for(var i = 0; i < imgData.data.length;) {
        var red = imgData.data[i],
            green = imgData.data[i+1],
            blue = imgData.data[i+2],
            opacity = imgData.data[i+3],    //不處理，可以省去這一行，佔位說明這一位是透明度
            average = (red + green + blue) / 3;    //所謂灰度其實是取三種顏色的平均值
        imgData.data[i] = imgData.data[i+1] = imgData.data[i+2] = average;    //三個顏色設為一樣即是對應的灰色
        i += 4;
      }
      ctx.putImageData(imgData, startX, startY, 0, 0, width, height);    //把處理過的imagedata放回canvas中
      preview.src = canvas.toDataURL();    //儲存圖片資訊方便再進行處理
    });

　　選擇灰度並提交，我們看伺服器上生成的圖片

　　最後我們結合裁剪和灰度，一起處理一張圖片再提交。

　　好了，簡單的兩個圖片處理的方式就介紹到這，至於複雜的，你可以拿到每一個畫素的資訊，還擔心實現不了其他的功能麼。

從web圖片裁剪出發：瞭解H5中的canvas

從web圖片裁剪出發：瞭解H5中的canvas

從萊斯定理出發看程式分析中的sound與complete

利用H5中canvas畫布繪製一個時鐘(動態)

#圖文詳解：從實際和理論出發，帶你瞭解Java中的多執行緒

Dynamic Web TWAIN使用教程：如何從Firefox掃描圖片

開發者應該瞭解的 web 效能 and Web效能優化教程：如何對網站圖片優化？

從web實時通訊講H5 WebSocket

caffe lmdb資料集的準備：從原始圖片到生成lmdb檔案

Spring Batch：將資料從Web服務處理到MongoDB

NDK開發從入門到放棄(一：基本流程入門瞭解)

10年web前端工程師自白：前端如何從入門到不放棄

Web效能優化系列：藉助響應式圖片來改進網站圖片顯示

Java併發基礎：瞭解無鎖CAS就從原始碼分析

web前端實驗一：利用Js捕獲滑鼠事件實現圖片切換

從實踐出發：微服務佈道師告訴你Spring Cloud與Spring Boot他如何選擇

Maven教程：從零開始學習到深入瞭解

web前端基礎案例：圖片隨機切換特效

Android開發：仿微信和QQ空間發說說相簿讀取、拍照、圖片裁剪和圖片上傳伺服器等功能的實現

從基礎出發：統計學習方法三要素

Web---圖片驗證碼生成教程詳解-從簡單到複雜-從本地到前後臺

從web圖片裁剪出發：瞭解H5中的canvas

相關推薦