¶Javascript 的二值化演算法

原文連結: https://darkblack02.blogspot.com/2017/05/javascript.html
移植時的最後更新日期: 2017-05-07T10:12:29.494+08:00

影像處理一直是寫程式的一個口袋題目，不管是做smooth演算法，還是更簡單的取pixel值，在這個部落格都各別以C++和python實現過了。

最近，受朋友所託寫一個影像處理的小程式，是用來做二值化的演算法，其中的寫法是用原生的Javascript寫的，無需加任何的library即可執行。

完整版的程式放在github上面

主程式

function main() {
      const canvas = document.querySelector("#draw");
      var ctx = canvas.getContext(“2d”);
      const height = img.height;
      const width = img.width;
      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(img, 0, 0, width, height);
      let image = ctx.getImageData(0, 0, width, height);

      threshold = threshold_input.value;
      image = imageProcess(image);

      let [countW, countB] = countWB(image);
      showReport(countW, countB);

      console.log(countW/(countW+countB)*100, countB/(countW+countB)*100);
      ctx.putImageData(image, 0, 0);
    }

演算法處理

 function imageProcess(frame) {
      for(let i = 0; i < frame.data.length; i += 4) {
        let sum
          = frame.data[i + 0] +
            frame.data[i + 1] +
            frame.data[i + 2];

        let color = sum / 3;

        if (color > threshold) {
          color = 255;
        }
        else {
          color = 0;
        }

        frame.data[i + 0] = color; // RED
        frame.data[i + 1] = color; // GREEN
        frame.data[i + 2] = color; // Blue
      }
      return frame;
    }

執行注意事項