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
Attachment 614
Pixelatation
Attachment 620
Flip/Mirror
Attachment 616
Greyscale
Attachment 617
Color Invert
Attachment 618
Noise
Attachment 619
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