Javascript 的二值化演算法

  1. Javascript 的二值化演算法
    1. 主程式
    2. 演算法處理
    3. 執行注意事項

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;
}

執行注意事項

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