in this series tutorial, we will talk about Image Processing and we will see how to use JavaScript to apply some image processing algorithm to treat any image. at the end of the tutorial, we will see how to use some complex operations such as OCR, object recognition and so on.
I hope you will enjoy this and please give us some feedback.
Basics
before we start, let's see some basics.in this tutorial, we will often use an HTML object called Canvas, for those who don't know what is a canvas, it's an HTML element which can be used to draw graphics such as images, shapes, curves using javascript, it can also be used to create some animation, apply some operation in images and also can be used to build a game.
Using the Canvas element is very easy, all that we need to do is to create it using the <canvas> tag. You must know that some old browser doesn't support the canvas element.
create Canvas using HTML
to make a canvas in HTML we need to write this piece of code in our editor.
<!DOCTYPE HTML>
<html>
<head>
<link rel=stylesheet href="main.css">
</head>
<body>
<canvas id="image" width="800px" height="400px" style="border: 1px solid black;">
your browser doesn't support Canvas object
</canvas>
<script src="script.js"></script>
</body>
</html>
now that our canvas element was created let's start scripting using javascript.
javascript
to draw images using canvas we need first to access the DOM element and then get the canvas rendering context.
the rendering context is used to manipulate and create the content shown, in this tutorial we will use 2d rendering context.
the canvas element has a method called getContext() which allows us to get the canvas rendering context.
to select the canvas and get the rendering context we need to write these lines of code:
// accesing canvas using DOM
var canvas = document.getElementById("image");
// geting canvas rendring context
var ctx = canvas.getContext('2d');
Drawing images using Canvas
now that our canvas element is ready to use let's start. In this section, we see how to draw an image on the canvas using javascript.to make this it's very simple, we will create an image object, wait that our image is loaded, give it the image sources and then draw it inside our canvas.
note that it's important to use a onLoad event before drawing the image inside the canvas or it will not work.
so let's apply this to our code
// accesing canvas using DOM
var canvas = document.getElementById("image");
// geting canvas rendring context
var ctx = canvas.getContext('2d');
// create the image
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png";
and this what the results will look like
this looks amazing, but still, we need to do some operation on it. before we pass to the next section we will modify a little bit the width and the height of the canvas to be as the same dimension of the image so our image has a height=512px and a width=512px
Pixel Manipulation
now that we have created our image it's time to read it pixel by pixel, to make that we will need a javascript object called ImageData() this object will allow us to get all the pixel inside our context and we can modify them and implement them again inside our image to modify it. in this example, we will see how to make a grayscale function in javascript.
note that array data are represented with an array, the data are composed of 4 numbers going from 0 to 255 and they represent respectively the red, green, blue and alpha and the array is structured like this [red1,green1,blue1,alpha1,red2,green2,blue2,alpha2,......., red, green, blue, alpha]
so we will use a for loop to read all that array.
now for the example below we will need to get our image from the same folder of the script so i invite you to download this image and put it in your project folder
.png)
example source code
// accesing canvas using DOM
var canvas = document.getElementById("image");
// geting canvas rendring context
var ctx = canvas.getContext('2d');
// create the image
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
//accesing to image imagedata using getImageData
var pixel = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = pixel.data;
// reading the pixel data
for (var i = 0; i < data.length; i += 4) {
var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = avg;
data[i + 1] = avg;
data[i + 2] = avg;
}
ctx.putImageData(pixel, 0, 0);
}
img.src = "Lenna_(test_image).png";
and that's it we have made our first image processing using javascript, in the next tutorial we will see more advanced concepts, I hope you have enjoyed this tutorial and see you next week
Learn Image Processing using JavaScript
Reviewed by Medics
on
November 09, 2019
Rating:
Reviewed by Medics
on
November 09, 2019
Rating:
Wow this is awesome...
ReplyDelete