สำหรับโปรเจคเกี่ยวกับ image processing นั้น เราสามารถให้โปรแกรมรันบนบน browser ได้แล้วโดยใช้ HTML5 ซึ่งสามารถทำให้เราทำ image processing บน Web Browser ได้
ตัวอย่าง การทำ segmentation และ ใช้ otsu's method ในการหา threshold
<img src="1.jpg" id="pic" /><!----รูปภาพ -->
<br />
<button onclick="process()">Process</button><!--เรียก function process() เมื่อกด ปุ่ม Process -->
<br />
<script>
function otsu(histogram, pixelsNumber) { //function หาค่า threshold ด้วย otsu's method
var sum = 0
, sumB = 0
, wB = 0
, wF = 0
, mB
, mF
, max = 0
, between
, threshold = 0;
for (var i = 0; i < 256; ++i) {
wB += histogram[i];
if (wB == 0)
continue;
wF = pixelsNumber - wB;
if (wF == 0)
break;
sumB += i * histogram[i];
mB = sumB / wB;
mF = (sum - sumB) / wF;
between = wB * wF * Math.pow(mB - mF, 2);
if (between > max) {
max = between;
threshold = i;
}
}
return threshold;
}
function process()//function สำหรับทำ segmentation
{
//สร้าง canvas และ เก็บภาพต้นฉบับ
var im = document.getElementById("pic")
, cnv = document.createElement('canvas')
, ctx = cnv.getContext('2d');
//หาค่า threshold
cnv.width = im.width;
cnv.height = im.height;
ctx.drawImage(im, 0, 0);
var imData = ctx.getImageData(0, 0, cnv.width, cnv.height)
, histogram = Array(256)
, i
, red
, green
, blue
, gray;
for (i = 0; i < 256; ++i)
histogram[i] = 0;
for (i = 0; i < imData.data.length; i += 4) {
red = imData.data[i];
blue = imData.data[i + 1];
green = imData.data[i + 2];
gray = red * .2126 + green * .07152 + blue * .0722;
histogram[Math.round(gray)] += 1;
}
var threshold = otsu(histogram, imData.data.length / 4);
//สำหรับ pixel ที่มีค่า ต่ำกว่า threshold กำหนดให้เป็น 0 ถ้ามากกว่าหรือเท่ากับ threshold ให้เป็น 255
for (i = 0; i < imData.data.length; i += 4) {
imData.data[i] = imData.data[i + 1] = imData.data[i + 2] =
imData.data[i] >= threshold ? 255 : 0;
imData.data[i + 3] = 255;
}
ctx.putImageData(imData, 0, 0);
document.body.appendChild(cnv);//เพิ่ม canvas ผลการ แบ่ง Segment เข้าไปในหน้าเว็บ
}
</script>
