It is likely that you have used Photoshop or at least heard about it. With a few clicks, you can easily modify an image, enhance it, or do some sort of preprocessing. Actually, it is not that hard to do using JavaScript. For most of the functions, you need only a couple lines of code. This chapter is mostly about filters and image segmentation. Here, we will discuss many popular techniques and their applications. Moreover, we will introduce a new JavaScript library—tracking.js (http://trackingjs.com). It is mostly used for object tracking applications, but there are many utilties, which are relevant to the topic. It is interesting to know how to use both JSFeat, which we introduced in the first chapter, and tracking.js libraries together. We will see how to do this. Besides, we will compare their advantages in terms of image filtering. We will start from the installation of the new library and then follow the filter examples from the easiest to...
Let me give you a quick review of the tracking.js library. It is a great library that helps you with object detection, tracking, and image filtering. You can download it from http://trackingjs.com. In this section, we will focus on the the installation of the library and how both JSFeat and tracking.js libraries can be used together.
Actually, the installation of a JavaScript library is straightforward. You just need to add a script file to your <head> tag:
<script src="js/tracking.js"></script>
The image loading is done using the context, just like we did in the previous chapter:
var imageData = context.getImageData(0, 0, cols, rows);
In contrast to the JSFeat library, tracking.js works with arrays and it does not create a new object for images (as you remember, it is the matrix_t function for JSFeat). In that case, how do we apply a simple operation? Here is an example of how to convert a colored image to grayscale...
Image filtering is always a powerful tool to use in your Computer Vision applications. It allows you to apply many exciting effects on your photos, such as image correction, noise reduction, embossing, and many more. Image filtering is actually a huge subpart of an image processing area. In this section, we will discuss the concepts of image filtering and talk about a basic operation—convolution, which is widely used in all Computer Vision applications. Furthermore, we will see how different effects, such as blurring, are achieved.
The core of most filtering operations is image convolution. With its understanding you will have the power to make your own image filters.
The image convolution idea is that you want to apply to each pixel of the original image a transformation which is based on neighboring pixels. For this, you have a kernel—a simple 2D matrix, this is our transformation matrix. For each pixel of the original image, we take...
For most Computer Vision applications, you process an image but you do not actually need to get all the information from it. For example, sometimes you just need to get the shape information to find an appropriate object. There is a huge topic in the field of image processing called edge detection. Methods related to that topic, search for points where pixel brightness changes dramatically. The extracted information aims to capture changes in the properties of an image. To understand the concept better and to see how the basic edge information can be extracted from an image, we will discuss different edge filters (or operators) starting with the Sobel filter.
The Sobel operator or Sobel filter is common and widely used. It helps to detect edges and transitions in images. The Sobel operator uses two kernels during the processing—one for horizontal changes in brightness and another for vertical changes. Its kernel values are focused not on the current pixel...
We talked about filters a lot, but they usually require only some sort of a matrix kernel and that is it. If you think that there should be more cool stuff in image filtering, you are totally right! First, we will see how to apply edge detection and how it works. In the final part, we will review the histogram equalization algorithm, which you probably use a lot if you have Photoshop.
Let's be curious; what if we threshold an image after the Sobel filter? Thresholding is done by iterating over all pixels of a grayscale image and checking whether the value exceeds the threshold value:
for (var i = 0; i < arr.length; i++)
arr[i] = arr[i] > threshold ? 255 : 0;This is what the threshold looks like. Just set the value to 255 if it is higher than the threshold and to 0 when it is not.
Here are several examples of different thresholds, each image having a higher threshold value than the previous:
See? The higher the threshold we set, the fewer...
In this chapter, you first learned how to install tracking.js and how to use it with JSFeat. Now you know how to create your own image filters using the image convolution operation. Moreover, with separable convolutions, you can create much faster implementations of regular filters. When you need to reduce the noise, you will commonly use the Gaussian filter or the box blur filter when you need a faster algorithm. Edge detection? No problem, you can implement it and use it in your applications for both cases, when you need only the edges or the whole information about a change in image brightness. Last but not least, you now know how to improve the image contrast using histogram equalization. Look at how much we have covered in such a small chapter! There are many more topics on image processing and filtering, we just discussed a small portion of it. Eventually, we will be ready to use this knowledge in object detection.
In the next chapter, you will learn how to detect various objects...
© 2015 Packt Publishing Limited All Rights ReservedAuthor (1)
