Thread: Image processing tutorial

Introduction
Hi, my name is Chris and I love to program. I was inspired to write this tutorial because Java is an excellent language for manipulating images yet the information on how do so is scattered and incomplete. Basically, I would like to share the critical code and concepts involved in simple image processing and the code for an application to view the results. I will be using a BufferedImage of TYPE_INT_ARGB exclusively and the javax.imageio package to read and write to a PNG file.


The outcomes

Original Image
image.jpg

Pixelatation
image-pixelate2.jpg

Flip/Mirror
image-flip.jpg

Greyscale
image-greyscale.jpg

Color Invert
image-invert.jpg

Noise
image-nosie.jpg


The theory
As I mentioned above, we will be using a TYPE_INT_ARGB BufferedImage to store the image in memory. Every pixel in the image is represented by one 32bit integer with 8bits of information for each of the alpha, red, green and blue channels (RGB). We will not be using the alpha channel in this tutorial but just be aware that it is there. Now I am certain that you have already come across RGB before in HTML or image editors so I will keep this brief. The primary colors of red, green and blue can be added together to create a broad spectrum of colors. With 8bits we can specify a range of values in decimal 0..255 or in hexadecimal 0x00..0xFF. In binary it looks like this:

0000 0000   0000 0000   0000 0000    0000 0000
alpha       red         green        blue

Let's say we want to look at just the red value. To extract this value we will need to remove the other channels and shift the bits so they are sitting on their own. For the red channel this is achieved by shifting the bits 24 places to the right and then performing a logical AND on the rightmost 8bits:

int px = img.getRGB(x, y);
int alpha = (px >> 24) & 0xFF;
int red = (px >> 16) & 0xFF;
int green = (px >> 8) & 0xFF;
int blue = px & 0xFF;

We can reassemble the pixel from the constitute channels by shifting the bits back to place and adding them together.

int pixel = (alpha<<24) + (red<<16) + (green<<8) + blue;

These two code snippets allow us to alter and analyse the color of a pixel. What about the entire image I hear you ask. Well we simply use a nested for loop to iterate over every pixel as though it were a 2D array of size [WIDTH][HEIGHT].

for (int x = 0; x < img.getWidth(); x++) {
	for (int y = 0; y < img.getHeight(); y++) {
		int px = img.getRGB(x, y);
	        //do something with the pixel
                img.setRGB(x, y, px);
        }
}

The transformation algorithms
Greyscale is the easiest of the color transformations so we will start there. All we do is set each color to the average of all three. Advanced programs like Gimp or Photoshop will do a weighted average on the values since this technique generally produces a dark image.

//average of RGB
int avg = (red + blue + green) / 3;
 
//set R, G & B with avg color
int grey = (alpha<<24) + (avg<<16) + (avg<<8) + avg;

Flip/Mirror is the only positional transformation I will cover. This time we set the pixel in the destination image to the opposite location it came from.

//Flip vertical and horizontal
for (int x = 0; x < img.getWidth(); x++) {
	for (int y = 0; y < img.getHeight(); y++) {
		int px = img.getRGB(x, y);
		int destX = img.getWidth() - x - 1;
		int destY = img.getHeight() - y - 1;
 
                destImage.setRGB(destX, destY, px);			
	}
}

Pixelation involves a more complicated iteration method. Instead of incrementing our nested loops by 1, we increment it by the size of the desired pixelation block size and inside the loop we have another two nested loops. One which iterates over the block size averaging the value of the pixel and another which sets every pixel in the block to the average.

for (int x = 0; x < img.getWidth(); x+=size) {
	for (int y = 0; y < img.getHeight(); y+=size) {
 
		int px = 0;
 
		for (int xi = 0; xi < size; xi++) {
			for (int yi = 0; yi < size; yi++) {
				px += img.getRGB(x, y);
				px = px / 2;  //not a true average but it's close
			}
		}
 
		for (int xi = 0; xi < size; xi++) {
			for (int yi = 0; yi < size; yi++) {
				dest.setRGB(x+xi, y+yi, px);
			}
		}
	}
}

The application
This is taking longer that I thought it would so it's time to finish up. These four source files will allow you to quickly load an image from the command line, transform it, view the results and save them to file.

Main.java

import java.io.File;
import java.io.IOException;
import java.io.FileNotFoundException;
 
 
public class Main
{
  	/**
	* Entry point
	*/
	public static void main(String[] args) {
 
 
		try {
			final String filename = args[0];
			final File imageFile = new File(filename);
 
			//Start the JFrame
			java.awt.EventQueue.invokeLater(new Runnable() {
				public void run() {
					new ImageJFrame(imageFile);
				}
			});
 
 
		} catch (ArrayIndexOutOfBoundsException e) {
			System.err.println("Usage: java -jar ImageProcessor.jar <filename>");
			System.exit(-1);
		}
 
	}
}

ImageJFrame.java

import javax.swing.JFrame;
import java.io.File;
 
 
public class ImageJFrame extends JFrame
{
	public ImageJPanel panel;
 
	/**
	 *  Constructor
	 * 
	 *  Sets up a JFrame which contains an image
	 */
	public ImageJFrame(File imageFile) {
		super("Image processing frame");
 
		panel = new ImageJPanel(imageFile);  
 
		getContentPane().add(panel);
		setSize(panel.getWidth(), panel.getHeight());
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		setResizable(false);
		setVisible(true);
	}
}

ImageJPanel

import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import javax.swing.JPanel;
import java.io.File;
import java.io.IOException;
import javax.imageio.*;
 
public class ImageJPanel extends JPanel {
 
	public BufferedImage image;
 
	public int getWidth() {
		return image.getWidth();	
	}
 
	public int getHeight() {
		return image.getHeight();
	}
 
	public void paintComponent(Graphics g)
    {
        super.paintComponent(g);
        g.drawImage(image, 0, 0, null);  //draws the image
    }
 
	public void loadImage(File imageFile) {
		try {
			image = ImageIO.read(imageFile);
		} catch (IOException ex) {
			String directory = new File(".").getAbsolutePath();
			System.err.println("Could not open " + imageFile.getAbsolutePath() + " at " + directory);
			System.exit(-1);
		}	
	}
 
	public void saveToFile(String filename) {
        try {
            // Save as PNG
            String fn = filename + ".png";
            File file = new File(fn);
            ImageIO.write(image, "png", file);
        } catch (IOException e) {}
    }
 
 
	public ImageJPanel(File imageFile) {
		loadImage(imageFile);
		image = Transformations.flipVertical(image);		
		String filename = imageFile.getAbsolutePath() + "1";
		saveToFile(filename);
 
	}
}

You can see the call to the transformation here in the ImageJPanel constructor. The final file Transformations.java has a set of public static methods which accepts a BufferedImage as a parameter and returns a new BufferedImage. This will allow you to chain together different transformations and try out new ones with little fuss.


Transformations.java

import java.awt.image.BufferedImage;
import java.util.Random;
 
 
public class Transformations
{
 
 
	public static BufferedImage noise(BufferedImage img, int quantity, int threshold) {
		BufferedImage dest = new BufferedImage(img.getWidth(), img.getHeight(), BufferedImage.TYPE_INT_ARGB);
 
		//good values are
		//quantity = 10;
		//threshold = 50;
 
		Random r = new Random();
 
		for (int x = 0; x < img.getWidth(); x++) {
			for (int y = 0; y < img.getHeight(); y++) {
				int px = img.getRGB(x, y);
 
				int ran = r.nextInt(quantity);
				if (ran <= 1) {
 
					int amount = r.nextInt(threshold);
					int red = ((px >> 16) & 0xFF) + amount;
 
					amount = r.nextInt(threshold);
					int green = ((px >> 8) & 0xFF) + amount;	
 
					amount = r.nextInt(threshold);			
					int blue = (px & 0xFF) + amount;
 
					//Overflow fix
					if (red > 255) { red = 255; }
					if (green > 255) { green = 255; }
					if (blue > 255) { blue = 255; }
 
					px = (0xFF<<24) + (red<<16) + (green<<8) + blue;
				}
 
				dest.setRGB(x, y, px);
			}
		}
 
		return dest;
	}
 
 
 
 
 
 
	public static BufferedImage pixelate(BufferedImage img, int size) {
		BufferedImage dest = new BufferedImage(img.getWidth(), img.getHeight(), BufferedImage.TYPE_INT_ARGB);
 
		for (int x = 0; x < img.getWidth(); x+=size) {
			for (int y = 0; y < img.getHeight(); y+=size) {
 
				int px = 0;
 
				for (int xi = 0; xi < size; xi++) {
					for (int yi = 0; yi < size; yi++) {
						px += img.getRGB(x, y);
						px = px / 2;
					}
				}
 
				for (int xi = 0; xi < size; xi++) {
					for (int yi = 0; yi < size; yi++) {
						dest.setRGB(x+xi, y+yi, px);
					}
				}
			}
		}
 
		return dest;
	}
 
 
 
 
 
	public static BufferedImage histogramThreshold(BufferedImage img, int threshold) {
 
		BufferedImage dest = new BufferedImage(img.getWidth(), img.getHeight(), BufferedImage.TYPE_INT_ARGB);
 
		int reds[] = new int[256];
		int greens[] = new int[256];
		int blues[] = new int[256];
 
 
		//Count the occurance of each pixel's red, green and blue
		for (int x = 0; x < img.getWidth(); x++) {
			for (int y = 0; y < img.getHeight(); y++) {
				int px = img.getRGB(x, y);
 
 
				int red = ((px >> 16) & 0xFF);
				reds[red]++;
 
				int green = ((px >> 8) & 0xFF);
				greens[green]++;
 
				int blue = (px & 0xFF);
				blues[blue]++;
 
				dest.setRGB(x, y, px);
			}
		}
 
		//Analyse the results
		int mostCommonRed = 0;
		int mostCommonBlue = 0;
		int mostCommonGreen = 0;
 
		for (int i = 0; i < 256; i++) {
			if (reds[i] > mostCommonRed) {
				mostCommonRed = i;
			}
 
			if (blues[i] > mostCommonBlue) {
				mostCommonBlue = i;
			}
 
			if (greens[i] > mostCommonGreen) {
				mostCommonGreen = i;
			}
		}
 
		//Set the destination to pixels that are in a range +/- threshold from mostCommon value
		for (int x = 0; x < img.getWidth(); x++) {
			for (int y = 0; y < img.getHeight(); y++) {
				int px = img.getRGB(x, y);
 
				int red = ((px >> 16) & 0xFF);
				int green = ((px >> 8) & 0xFF);				
				int blue = (px & 0xFF);
				int val = 0;
 
 
				if (((red - 20 < mostCommonRed) && (red + threshold > mostCommonRed)) || ((blue - threshold < mostCommonBlue) && (blue + threshold > mostCommonBlue)) || ((green - threshold < mostCommonGreen) && (green + threshold > mostCommonGreen))) {
					val = (0xFF<<24) + (red<<16) + (green<<8) + blue;
				} else {
					val = (0xFF<<24) + (0xFF<<16) + (0xFF<<8) + 0xFF;
				}
 
 
				dest.setRGB(x, y, val);
			}
		}
 
		return dest;
	}
 
 
 
	public static BufferedImage invert(BufferedImage img) {
		BufferedImage dest = new BufferedImage(img.getWidth(), img.getHeight(), BufferedImage.TYPE_INT_ARGB);
 
		for (int x = 0; x < img.getWidth(); x++) {
			for (int y = 0; y < img.getHeight(); y++) {
				int px = img.getRGB(x, y);
 
				//Subtracting the channels value from 0xFF effectively inverts it
				int red = 0xFF - ((px >> 16) & 0xFF);
				int green = 0xFF - ((px >> 8) & 0xFF);
				int blue = 0xFF - (px & 0xFF);
 
				int inverted = (0xFF<<24) + (red<<16) + (green<<8) + blue;
				dest.setRGB(x, y, inverted);
			}
		}
 
		return dest;
	}
 
 
 
	public static BufferedImage greyScale(BufferedImage img) {
		BufferedImage dest = new BufferedImage(img.getWidth(), img.getHeight(), BufferedImage.TYPE_INT_ARGB);
 
		for (int x = 0; x < img.getWidth(); x++) {
			for (int y = 0; y < img.getHeight(); y++) {
 
				int px = img.getRGB(x, y);
 
				int alpha = (px >> 24) & 0xFF;
				int red = (px >> 16) & 0xFF;
				int green = (px >> 8) & 0xFF;
				int blue = px & 0xFF;
 
				//average of RGB
				int avg = (red + blue + green) / 3;
 
				//set R, G & B with avg color
				int grey = (alpha<<24) + (avg<<16) + (avg<<8) + avg;
 
				dest.setRGB(x, y, grey);
			}
		}
 
		return dest;
	}
 
 
	public static BufferedImage burn(BufferedImage img) {
		BufferedImage dest = new BufferedImage(img.getWidth(), img.getHeight(), BufferedImage.TYPE_INT_ARGB);
 
		for (int x = 0; x < img.getWidth(); x++) {
			for (int y = 0; y < img.getHeight(); y++) {
				int px = img.getRGB(x, y);
 
				int burn = px << 8; //this was a lucky guess. not sure why it works
 
				dest.setRGB(x, y, burn);
			}
		}
 
		return dest;
	}
 
 
	public static BufferedImage gaussianFilter(BufferedImage img) {
		int cuttoff = 2000;
		double magic = 1.442695;
		int xcenter = img.getWidth() / 2 - 1;
		int ycenter = img.getHeight() / 2 - 1;
 
		BufferedImage dest = new BufferedImage(img.getWidth(), img.getHeight(), BufferedImage.TYPE_INT_ARGB);
 
		for (int x = 0; x < img.getWidth(); x++) {
			for (int y = 0; y < img.getHeight(); y++) {
				int px = img.getRGB(x, y);
 
				double distance = Math.sqrt(x*x+y*y);
				double value = px*255*Math.exp((-1*distance*distance)/(magic*cuttoff*cuttoff));
				dest.setRGB(x, y, (int) value);	
 
			}
		}
 
		return dest;
 
	}
 
 
	public static BufferedImage flipVerticalHorizontal(BufferedImage img) {
		BufferedImage dest = new BufferedImage(img.getWidth(), img.getHeight(), BufferedImage.TYPE_INT_ARGB);
 
		//Flip vertical and horizontal
		for (int x = 0; x < img.getWidth(); x++) {
			for (int y = 0; y < img.getHeight(); y++) {
				int px = img.getRGB(x, y);
				int destX = img.getWidth() - x - 1;
				int destY = img.getHeight() - y - 1;
				dest.setRGB(destX, destY, px);			
			}
		}
 
		return dest;
	}
 
 
 
	public static BufferedImage flipVertical(BufferedImage img) {
		BufferedImage dest = new BufferedImage(img.getWidth(), img.getHeight(), BufferedImage.TYPE_INT_ARGB);
 
		//Flip vertical and horizontal
		for (int x = 0; x < img.getWidth(); x++) {
			for (int y = 0; y < img.getHeight(); y++) {
				int px = img.getRGB(x, y);
				dest.setRGB(x, img.getHeight() - y - 1, px);			
			}
		}
 
		return dest;
	}
 
 
	public static BufferedImage flipHorizontal(BufferedImage img) {
		BufferedImage dest = new BufferedImage(img.getWidth(), img.getHeight(), BufferedImage.TYPE_INT_ARGB);
 
		//Flip horizontal
		for (int x = 0; x < img.getWidth(); x++) {
			for (int y = 0; y < img.getHeight(); y++) {
				int px = img.getRGB(x, y);
				dest.setRGB(img.getWidth() - x - 1, y, px);			
			}
		}
 
		return dest;
	}
 
}

Well I hope you enjoyed the tutorial (it was the first one I have written). Please feel free to write your own transformation and post them for all to enjoy.

Regards,

Chris

thanks a lot for your great tutorial, I know noise detection is an important concept in image processing. but how your noise Function works?
can you help me to go deep in this concept?

Regards
Marjan

Firstly, I want to thank you for writing this tutorial about image processing...

But when I try to run the main class, the output prints the error message from the ArrayIndexOutOfBoundsException which is

Usage: java -jar ImageProcessor.jar <filename>
Java Result: -1

Can you tell me why it happened?

Regards,
Yordan

Hope you have got the answer.. Still if not..

in Main.java, replace following line:

final String filename = args[0];

by:

final String filename = "some-image-file-path";

hi. i am beginer and like to work image prosseccing ? can you help me please?

gaussianFilter part not working,Images not blurred how to display images with gaussianFilter??? anybody help please

Originally Posted by Mumpy Zinu

gaussianFilter part not working,Images not blurred how to display images with gaussianFilter??? anybody help please

Been a while but it looks like what I wrote was a Guassian edge detection, not a Gaussian blur. There is a guassian blur implementation here you can look at.

hi Chris
thanks a lot for your great tutorial.
best regards