引子

在玩遊戲的時候，碰到一個互動效果：背景一張看起來黑白的圖，然後用擦除的互動，讓影象變的有顏色。也想試試做這個效果，首先想到的是那個黑白的圖是怎麼形成的，於是就查資料，找到了用 Canvas 轉換的方法。

• Origin
• My GitHub

思路

看起來是黑白的影象，其實是灰度影象，進一步說明見影象。這種影象的特點是畫素的顏色分量取值都是一樣的，而 Canvas 的方法 getImageData 可以獲取到畫布上的畫素值資料，改變資料後，使用方法 putImageData 將資料繪製到畫布上。這樣就可以達到灰度影象的效果。

實現

這是示例頁面，移動端訪問如下：

主要實現如下：

  /**
   * 影象灰度處理
   * @param {object} context canvas 上下文
   * @param {number} sx 提取影象資料矩形區域的左上角 x 座標。
   * @param {number} sy 提取影象資料矩形區域的左上角 y 座標。
   * @param {number} sw 提取影象資料矩形區域的寬度。這要注意一下，canvas 標籤上 width 屬性值，不是渲染後實際寬度值，否則在高清手機螢幕下且做了高清處理，只能獲取到部分影象寬度。
   * @param {number} sh 提取影象資料矩形區域的高度。這要注意一下，canvas 標籤上 height 屬性值，不是渲染後實際高度值，否則在高清手機螢幕下且做了高清處理，只能獲取到部分影象高度。
   */
  function toGray(context,sx, sy, sw, sh) {
    var imageData = context.getImageData(sx, sy, sw, sh);
    var colorDataArr = imageData.data;
    var colorDataArrLen = colorDataArr.length;
    for(var i = 0; i < colorDataArrLen; i+=4) {
      // 計算方式之一
      var gray=(colorDataArr[i]+colorDataArr[i+1]+colorDataArr[i+2])/3;
      colorDataArr[i] = gray;
      colorDataArr[i+1] = gray;
      colorDataArr[i+2] = gray;
    }
    context.putImageData(imageData,0,0);
  }
 

參考資料

• How do you convert a color image to black/white using Javascript?
• Canvas MDN
• getImageData MDN
• putImageData MDN