How to Implement Binarization using HTML5 and JavaScript?

Lai Taiyu

Rate me:

4.62/5 (6 votes)

1 Mar 2015CPOL

28.9K

202

A simple image binarization

Download source and demo - 49.3 KB

Introduction

Sometimes, we need to transform color images to monochrome images. There is one way which is very simple to help you to do it. You can download the source code and binary files. Even I referred to OpenCV book, but I think it is so easy. I decided to implement it by myself. This tip is for beginners.

Background

Equipment Operation System: Microsoft Windows 7 Professional (64 bit) Development Utility: Notepad with HTML5 and JavaScript

Using the Code

HTML

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function imageLoaded(ev) {
    element = document.getElementById("cancan");
    c = element.getContext("2d");

    // The image, assumed to be 512x512
    im = ev.target; 

    // Read the width and height of the canvas
    width = element.width;
    height = element.height;

    // Stamp the image on the left of the canvas.
    c.drawImage(im, 0, 0);

    // Get all canvas pixel data
    imageData = c.getImageData(0, 0, width, height);

    // The width index is output position.
    w2 = width / 2;

    // Run through the image. 
  // The height of the image.
    for (y = 0; y < height; y++) {
	  // *4 for 4 ints per pixel.
	  // This is an input index.
        inpos = y * width * 4; 
	  // This is an output index.
        outpos = inpos + w2 * 4
	  // The width of the image.
        for (x = 0; x < w2; x++) {
		// Get the pixel of the red channel.
            r = imageData.data[inpos++]
		// Get the pixel of the green channel.
            g = imageData.data[inpos++]
		// Get the pixel of the blue channel.
            b = imageData.data[inpos++]
		// Get the pixel of the alpha channel.
            a = imageData.data[inpos++]
            // Transform RGB color space to gray scale.
			gray =  (0.299 * r + 0.587 * g + 0.114 * b)
            // This is our threshold. You can change it.
            if ( gray > 120 )
			{
			// Set the pixel is white.
	            imageData.data[outpos++] = 255;
    	            imageData.data[outpos++] = 255;
        	      imageData.data[outpos++] = 255;
            	imageData.data[outpos++] = a;
			}
			else
			{
			// Set the pixel is black.
            	imageData.data[outpos++] = 0;
            	imageData.data[outpos++] = 0;
	            imageData.data[outpos++] = 0;
    	        imageData.data[outpos++] = a;
			}
        } // The closing "The width of the image".
    } // The closing "The height of the image".

    // Put pixel data on canvas.
    c.putImageData(imageData, 0, 0);
}

// Establish an image object.
im = new Image();
// Load the javascript function.
im.onload = imageLoaded;
// Code assumes this image is 512x512.
im.src = "B_01.jpg"; 
</script>
</head>

<body>
<!-- Create a canvas -->
<canvas id="cancan" width="1024", height="512">Canvas</canvas>
</body>
</html>

Reference

[1] Gary Bradski and Adrian Kaehler, “Learning OpenCV: Computer Vision with the OpenCV Library,” O’REILLY, September 2008, ISBN:978-0-596-51613-0

Acknowledgement

Thank you (HTML5, JavaScript, Lenna Sjööblom) very much for this great development utility and beautiful photo.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Lai Taiyu

Instructor / Trainer GJun Information Co.,Ltd.

Taiwan

Dr. Lai Tai-Yu received the Ph.D. from National Taipei University of Technology in 2016. He is the co-author of 2 journal, 25 conference papers, 6 books, 9 articles in the codeproject.com, and 2 patents inventions. His research interests lie in the areas of digital image processing and AI. He is a lecturer.　　

Dr Taiyu Lai. Stopień doktora, uzyskał w 2016 roku i objął stanowisko adiunkta na Wydziale. Ponadto jest autorem i współautorem: 2 publikacji artykułu w czasopiśmie naukowym, 25 artykułów opublikowanych w materiałach konferencyjnych, 6 książek, 9 eseje w monografiach codeproject.com, i posiada dwa patenty. Zainteresowania naukowe: przetwarzania obrazów i AI. Jest wykładowcą.　　

赖岱佑在2016年取得台北科技大学资讯工程博士学位，有2篇期刊、25篇会议论文、6本书籍、9篇文章在 codeproject.com 、2项专利。研究方向：数字图像处理和AI。现职是一位讲师。

賴岱佑在2016年取得台北科技大學資訊工程博士學位，有2篇期刊、25篇會議論文、6本書籍、9篇文章在 codeproject.com 、2項專利。研究方向：數位影像處理和AI。現職是一位講師。

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.