2017年5月7日 星期日

Javascript 的二值化演算法

影像處理一直是寫程式的一個口袋題目,不管是做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;
    }

執行注意事項

其中,getImageData語法,無法用瀏覽器透過file://讀取,所以在此建議使用python的簡易web server即可透過localhost:8000(預設用8000)成功取得影像資料。

沒有留言:

張貼留言