Creating Black and White Image Using HTML5

Introduction

In this article, we learn how to create a Black and White image from a Color image using HTML5. When the user clicks on a button, the image changes from Color to Black and White and back again; when clicking again, the image changes back to the original.

Step 1: First we define the body of the HTML using a canvas element, like this:

<body>
<div>
<h1>Creating Black and White Image</h1>
<input id='BnWButton' type='button' value="Click Me" onclick="return BnWButton_onclick()" />
</div>
<canvas id='canvas' width='800' height='750'>
Sorry, Canvas is not supported in this Browser...
</canvas>
<script src='BnW.js' type="text/javascript"></script>
</body>

Step 2: Then we define the functionality using JavaScript. We use the getImageData method to access pixels of the image and the setImageData method to put pixels back into the image. The Create_BnW function takes the average of the red, green, and blue values of each pixel and assigns that average to each of the values i.e. it drains the color from the image, like this:

function Create_BnW() {
var data = undefined,
i = 0;
imagedata = context.getImageData(0, 0, canvas.width, canvas.height);
data = imagedata.data;
for (i = 0; i < data.length - 4; i += 4) {
average = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = average;
data[i + 1] = average;
data[i + 2] = average;
}
context.putImageData(imagedata, 0, 0);
}
function Create_Color() {
context.drawImage(image, 0, 0,image.width, image.height, 0, 0,context.canvas.width, context.canvas.height);
}
var a=0;
function BnWButton_onclick() {
if (a == 0) {
Create_BnW();
a++
}
else {
Create_Color();
a--;
}
};

Step 3: We use CSS in the Head section of the HTML for describing the look and formatting to our HTML page, like this:

<head>
<title>Create Black and White Image</title>
<style> body {
background: rgba(150, 205, 500, 0.3);
}
#canvas {
margin: 10px 20px 0px 20px;
border: thin solid Black;
cursor: crosshair;
}
#BlacknWhite {
width: 81px;
}
</style>
</head>

The complete code looks like this:

//HTML Code
<head>
<title>Create Black and White Image</title>
<style>
body {
background: rgba(150, 205, 500, 0.3);
}
#canvas {
margin: 10px 20px 0px 20px;
border: thin solid Black;
cursor: crosshair;
}
#BlacknWhite {
width: 81px;
}
</style>
</head>
<body>
<div>
<h1>Creating Black and White Image</h1>
<input id='BnWButton' type='button' value="Click Me" onclick="return BnWButton_onclick()" />
</div>
<canvas id='canvas' width='800' height='750'>
Sorry,Canvas is not supported in this Browser..
</canvas>
<script src='BnW.js' type="text/javascript"></script>
</body>
//JavaScript Code
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
image = new Image(),
BnWButton = document.getElementById('BnWButton');
image.src = 'water.jpg';
image.onload = function () {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0, 0, image.width, image.height, 0, 0, context.canvas.width, context.canvas.height);
};
function Create_BnW() {
var data = undefined,
i = 0;
imagedata = context.getImageData(0, 0, canvas.width, canvas.height);
data = imagedata.data;
for (i = 0; i < data.length - 4; i += 4) {
average = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = average;
data[i + 1] = average;
data[i + 2] = average;
}
context.putImageData(imagedata, 0, 0);
}
function Create_Color() {
context.drawImage(image, 0, 0,image.width, image.height, 0, 0,context.canvas.width, context.canvas.height);
}
var a=0;
function BnWButton_onclick() {
if (a == 0) {
Create_BnW();
a++
}
else {
Create_Color();
a--;
}
};

Output

After button click

When clicking again, the image switches back to the original color