We've had a lot of digital image processing tools for a long time: Photoshop, Lightroom, GIMP, PhotoScape, and many more. However, in the past few years, one became popular among non-expert users due to its easiness of use and social features: Instagram. Have you ever wondered how Instagram filters work? It is actually pretty simple matrix operations! So simple we can build our own without any external library, just pure and simple HTML + JS. Let's build one now. First step is to create our HTML file, it contains only 35 lines. Let's call it "OpenInsta", you can check the code at my GitHub. final source OpenInsta OpenInsta Red Green Blue Brightness Constrast Grayscale <!DOCTYPE html> < = > html lang "en" < > head < = > meta charset "UTF-8" < > title </ > title </ > head < > body < > h1 </ > h1 < = = = /> input type "file" accept "image/*" id "fileinput" < > div < = > label for "red" </ > label < = = = = = > input type "range" min "-255" max "255" value "0" id "red" < = > label for "green" </ > label < = = = = = > input type "range" min "-255" max "255" value "0" id "green" < = > label for "blue" </ > label < = = = = = > input type "range" min "-255" max "255" value "0" id "blue" < = > label for "brightness" </ > label < = = = = = > input type "range" min "-255" max "255" value "0" id "brightness" < = > label for "contrast" </ > label < = = = = = > input type "range" min "-255" max "255" value "0" id "contrast" < = > label for "grayscale" </ > label < = = > input type "checkbox" id "grayscale" < /> br < = = = > canvas id "canvas" width "0" height "0" </ > canvas </ > div < = > script src "main.js" </ > script </ > body </ > html We have one file input, one range controller for each color channel (red, blue and green) plus brightness and contrast range controllers, and finally a grayscale checkbox. We also have a to draw our image while we process it. At the bottom we include a JavaScript file which will contain our image processing engine that we will build now. canvas main.js If you open the HTML file on the browser, that's how it should look like Let's start writing our with the file loader. It will connect our file input with our canvas, converting the image in whatever format it is (JPEG, PNG, BMP, etc.) into a flat unidimensional array. main.js fileinput = .getElementById( ) canvas = .getElementById( ) ctx = canvas.getContext( ) srcImage = Image imgData = originalPixels = fileinput.onchange = { (e.target.files && e.target.files.item( )) {
    srcImage.src = URL.createObjectURL(e.target.files[ ])
  }
}

srcImage.onload = {
  canvas.width = srcImage.width
  canvas.height = srcImage.height
  ctx.drawImage(srcImage, , , srcImage.width, srcImage.height)
  imgData = ctx.getImageData( , , srcImage.width, srcImage.height)
  originalPixels = imgData.data.slice()
} const document 'fileinput' const document 'canvas' const '2d' const new let null let null ( ) function e if 0 0 ( ) function 0 0 0 0 We assign two events: When our input changes (i.e. when the user selects an image) we attach the file as the source of a JavaScript node. This node will automatically start loading the image and, when it is done, we draw its contents to our canvas while we extract the pixels array on a separate variable we will use for processing. Image The Image node we are creating is basically the JS representation of a HTML <img> tag. The variable we have extracted using method is an object representation of the image, having only three attributes: width, height and data, which is the unidimensional pixels array. We store the pixels array on a separate variable to use it as a base for our image modifications. imgData getImageData() Suppose our image is 2x2, the array would be something like , where the eight first values represents the 2 pixels of the first row and the next eight values represents the 2 pixels of the second row, having each pixel four values varying from 0 to 255 representing red, green, blue and alpha channels respectively. We can, therefore, create a method to get the index of a given pixel as follows: [128, 255, 0, 255, 186, 182, 200, 255, 186, 255, 255, 255, 127, 60, 20, 128] { (x + y * srcImage.width) * } ( ) function getIndex x, y return 4 Now we can start building our filters! First of all, let's define a method to perform the transformations and assign it to each range/check input in our HTML page. red = .getElementById( ) green = .getElementById( ) blue = .getElementById( ) brightness = .getElementById( ) grayscale = .getElementById( ) contrast = .getElementById( ) { ( i = ; i < srcImage.height; i++) { ( j = ; j < srcImage.width; j++) { }
  } }

red.onchange = runPipeline
green.onchange = runPipeline
blue.onchange = runPipeline
brightness.onchange = runPipeline
grayscale.onchange = runPipeline
contrast.onchange = runPipeline const document 'red' const document 'green' const document 'blue' const document 'brightness' const document 'grayscale' const document 'contrast' ( ) function runPipeline // Get each input value for let 0 for let 0 // Apply grayscale to pixel (j, i) if checked // Apply brightness to pixel (j, i) according to selected value // Apply contrast to pixel (j, i) according to selected value // Add red to pixel (j, i) according to selected value // Add green to pixel (j, i) according to selected value // Add blue to pixel (j, i) according to selected value // Draw updated image Now every time red, green, blue, brightness, grayscale and contrast input changes, our pipeline will run applying our filters and displaying the result. Red, Green and Blue We start with the simplest filters. Going from -255 to 255, the user selects a value to be added on a given channel on every pixel. So, for example, if the pixel's red is currently 128 and the user selects 50 on the input we will have a pixel with red 178. But what happens if the pixel is currently 230? We cannot have a red with value 280, so we must clamp it to keep it between the boundaries. { .max( , .min( .floor(value), ))
} ( ) function clamp value return Math 0 Math Math 255 We can mathematically define the red, green and blue function as , where x is the current pixel value on that channel and alpha is the value the user selected. f(x) = x+ɑ Here's how our function to add a blue value to a pixel is defined. The functions to add red and green are left as an exercise, but is pretty much the same, having to change just the offset it uses. R_OFFSET = G_OFFSET = B_OFFSET = { index = getIndex(x, y) + B_OFFSET currentValue = currentPixels[index]
  currentPixels[index] = clamp(currentValue + value)
} const 0 const 1 const 2 ( ) function addBlue x, y, value const const An image with enhanced blue looks like this: Brightness The concept of brightness refers to how next to white our pixels are. Since the pure white pixel is represented by R=255, G=255 and B=255 we can easily verify that highest channel values leads to brighter pixels. Since we don't want to enhance any color channel specifically, we must change all of them, increasing or decreasing the mean of the each pixel. {
  addRed(x, y, value)
  addGreen(x, y, value)
  addBlue(x, y, value)
} ( ) function addBrightness x, y, value An image with decreased brightness looks like this: Contrast The most complex filter is the contrast, which refers to how spaced is the colors of an image. A higher contrast means whites whiter and blacks blacker, so the pixels get more "distinguishable". There are plenty options to enhance a picture contrast, but for the learning purposes let's use a simpler one. The user input from -255 to 255 gets normalized where -255 to 0 is mapped to a range of 0 to 1 (less contrast to unchanged contrast) and 0 to 255 mapped to a range of 1 to 2 (from unchanged to double contrast). Let's call this normalized value alpha, so the contrast function can be defined as: . That's confuse, but can be explained: x is the current channel color, we apply this function on every channel. We subtract 128 which is the half of possible color values (remember it goes from 0 to 255? remember we want to make white values whiter and blacks blacker?) and multiply alpha. We then sum back this removed 128. For example, if the current value is 180 and alpha is 1.4 (increase contrast), we have: 1.4 * (180 - 128) + 128 = 1.4 * 52 + 128 = 72.8 + 128 = 200.8. We made a white value whiter. If the current color is "blacker", x - 128 will result into a negative value, which multiplied by alpha will become even more negative and decrease. Let's see in JavaScript: histogram f(x) = ɑ * (x - 128) + 128 { redIndex = getIndex(x, y) + R_OFFSET greenIndex = getIndex(x, y) + G_OFFSET blueIndex = getIndex(x, y) + B_OFFSET redValue = currentPixels[redIndex] greenValue = currentPixels[greenIndex] blueValue = currentPixels[blueIndex] alpha = (value + ) / nextRed = alpha * (redValue - ) + nextGreen = alpha * (greenValue - ) + nextBlue = alpha * (blueValue - ) + currentPixels[redIndex] = clamp(nextRed)
  currentPixels[greenIndex] = clamp(nextGreen)
  currentPixels[blueIndex] = clamp(nextBlue)
} ( ) function addContrast x, y, value const const const const const const const 255 255 // Goes from 0 to 2, where 0 to 1 is less contrast and 1 to 2 is more contrast const 128 128 const 128 128 const 128 128 If you try to decrease contrast, on the other hand, you will narrow the colors histogram until all you can see is a plain gray picture. A picture with enhanced contrast looks like: Grayscale Our last filter is not scary as the previous one. A pixel can be made grayscale, or monochromatic, by simply converting it from three channels to a single one. What comes in mind to do that? Mean! All you have to do is to take the mean of R, G and B channels and apply it to R, G and B channels. { redIndex = getIndex(x, y) + R_OFFSET greenIndex = getIndex(x, y) + G_OFFSET blueIndex = getIndex(x, y) + B_OFFSET redValue = currentPixels[redIndex] greenValue = currentPixels[greenIndex] blueValue = currentPixels[blueIndex] mean = (redValue + greenValue + blueValue) / currentPixels[redIndex] = clamp(mean)
  currentPixels[greenIndex] = clamp(mean)
  currentPixels[blueIndex] = clamp(mean)
} ( ) function setGrayscale x, y const const const const const const const 3 A colored picture converted to grayscale looks like: Bringing everything together Now that we have enough filters, let's update our "pipeline" function to effectively run them. The order here is important, because the result of one filter is used for the next one. Firstly, we apply the grayscale if checked, then brightness and contrast and finally R, G and B (only if not in grayscale). {
  currentPixels = originalPixels.slice() grayscaleFilter = grayscale.checked brightnessFilter = (brightness.value) contrastFilter = (contrast.value) redFilter = (red.value) greenFilter = (green.value) blueFilter = (blue.value) ( i = ; i < srcImage.height; i++) { ( j = ; j < srcImage.width; j++) { (grayscaleFilter) {
        setGrayscale(j, i)
      }

      addBrightness(j, i, brightnessFilter)
      addContrast(j, i, contrastFilter) (!grayscaleFilter) {
        addRed(j, i, redFilter)
        addGreen(j, i, greenFilter)
        addBlue(j, i, blueFilter)
      }
    }
  }

  commitChanges()
} ( ) function runPipeline const const Number const Number const Number const Number const Number for let 0 for let 0 if if Our commit function simply gets the modified pixels, apply on ImageData object and draws the result. { ( i = ; i < imgData.data.length; i++) {
    imgData.data[i] = currentPixels[i]
  }

  ctx.putImageData(imgData, , , , , srcImage.width, srcImage.height)
} ( ) function commitChanges for let 0 0 0 0 0 We can't simply do imgData.data = currentPixels because it is a constant that cannot be reassigned. And that's it! Play with the final result and download the images using right click > Save Image As... Final thoughts At the end we have developed an app with less than 200 lines of code that can powerfully apply the most common filters we'd want on an image processing tool! But there is something missing: where is those cool city name filters? They are pretty much a predefined combination of these presented here. Why don't you get your hands dirty and upgrade this app with your favorite cities as presets? Final source code can be checked here and you can play with the software here . All examples were made using this code. Pictures: Joaquina Beach (splash), Cascavel downtown (blue), Curitiba Botanical Garden (brightness), Ilha do Mel (contrast) and Hercílio Luz Bridge (grayscale).

Instagram

Target

Implementing 2FA: How Time-Based One-Time Password Actually Works [With Python Examples]

Genetic Algorithms Explained : A Python Implementation

truck.move(origin, destination);

Read My Stories

Too Long; Didn't Read

Boost your HackerNoon story @ $159.99! 🚀

Understanding Basic Image Processing Algorithms [A Hands-on JavaScript Tutorial]

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Genetic Algorithms Explained : A Python Implementation

10 Things Everyone Should Know About Machine Learning

10 Repositories that Will Transform the Way You Approach Technical Interviews

10 (Free) Data Structure and Algorithm Courses Junior Developers Should Explore

10 Data Structure & Algorithms Books Every Programmer Should Read

Genetic Algorithms Explained : A Python Implementation

10 Things Everyone Should Know About Machine Learning

10 Repositories that Will Transform the Way You Approach Technical Interviews

10 (Free) Data Structure and Algorithm Courses Junior Developers Should Explore

10 Data Structure & Algorithms Books Every Programmer Should Read

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps