Image Processor

A web application for simulating algorithms of edge detection and image processing

  • Project Period: Mar. 2018 - Apr. 2018
  • Project Duration: One Month
  • Project Supervisor: Dalton Lin
  • Project Type: Individual Class Project

Introduction

Image processing is an essential concept in computer vision. Each frame in a video clip will be pre-processed if a computer performs detection on human, animals, or objects from the outside world. Edge detection is a part of knowledge in the field of image processing. A computer utilizes calculations of convolution with an edge operator to achieve edge detection. The goal of the project is to demonstrate different edge operators in edge detection, such as Laplacian, Prewitt, and Sobel operators, with an input image. Therefore, in this project, to learn the image processing easily, I create a web application- Image Processor to perform an edge operator on different photos which people offer. The new learners in computer vision are able to learn the basic ideas of pixel and different algorithms of edge detection.
Demo

System Design

In the project, there are two parts of system design - backend and frontend.

  • Back End : I developed a backend server with NodeJs. The server can listen to client’s requests and give responses with a file system.
  • Front End : I utilized canvas, a graphical approach if we render images on Web, to display image, 3x3 mask of pixels, and a result of edge detection in the website. With the technology of canvas, programmers can easily manipulate pixels with the Javascript.
    Below is the process of the applicationan :
    1. The input image is transformed into grayscale image.
    2. The edge operator is implemented on the grayscale image and produced the result image

Users also can customized their operators in the application. The image can be processed by Laplacian, Prewitt, and Sobel operators and be smoothed by Gaussian, and Identity filters. In addition, users can preview and uploaded image. Users can understand the diverse effects on different images after the implementation of edge detection.

Review

This project provided me an opportunity to take a deep insight into the implmentation of edge operators for images in computer vision. I directly implemented the calculation of convolution by using canvas, one of the components in HTML5. With the technology of canvas, I know how to manipulate the pixels of an image in Web applications. The concept of canvas also motivated me to make a further application in the web in the future. For example, we can use canvas to create an animation or some small games.