Image processing: The basic structure of the image read by the program

Introduction

An image that is sure to be included in both program creation and website creation. But it's safe to say that no one knows what the computer is actually doing inside. Understanding and using the operating principles of all electronic devices such as cameras is a stupid story, and the image can be said to be the same story. However, as a programmer, if I can modify the image to my liking with code, my dreams will spread again, so I would like to talk about image processing in several parts. think.

Image structure

Before we can play with the image as we like, we need to figure out what the structure is like. So, I prepared one image as above, but it is actually an image file created by using a program.

imageProcess01_1.java

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;

public class imageProcess01_1 {
	public static void main(String[] args) {
		int width = 100;     //Image width
		int height = 100;    //Vertical image
		int color = 0;       //1 Pixel color information
		int[] rgb = new int[width * height];　　　　　　　　//Whole image color information
		BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_4BYTE_ABGR);
		
		for(int i = 0; i < height; i++) {
			for(int j = 0; j < width; j++) {
				//Determine the real coordinates of the array
				int index = (i * width) + j;

				//Change the color depending on the coordinates
				//Color information is saved in hexadecimal.
				switch(index / 2500) {
				case 0: 	color = 0xFFFF0000; break;
				case 1: 	color = 0xFF00FF00; break;
				case 2: 	color = 0xFF0000FF; break;
				default: 	color = 0xFF000000; break;
				}
				rgb[index] = color;
			}
		}
		
		img.setRGB(0, 0, width, height, rgb, 0, width);
		try {
			ImageIO.write(img, "png", new File("img.png "));
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
}

As mentioned above, you can generate an image file using Java's BufferedImage class. What is important here is the place where the coordinates of the array are created with the index variable and the hexadecimal number distributed by the switch. Let's look at each one.

Array of color information and real coordinates

When we look at an image, we always see a square image. However, the color of the actual image is not a two-dimensional array as you can see in the above code, but an ordinary array. Then, how the colors are actually displayed is simply sorted in order using the width length without considering the vertical length.

The color of the actual image is displayed like this.

imageProcess01_1.java

for(int i = 0; i < height; i++) {
	for(int j = 0; j < width; j++) {
		//Determine the real coordinates of the array
		int index = (i * width) + j;
	}
}

Therefore, when counting the width and vertical coordinates separately using two for statements like this, the actual coordinates of the array cannot be calculated without using the above formula.

Structure of color information

Next, let's see what kind of data the color information actually has. The data type of color information is Int type. The capacity that the Int type can store is 4 bytes in total, but this is divided into 1 byte and each byte will store information about color.

It is saved in this order from the first 1 byte, and each can save 0 to 255, a total of 256 data. And since the number 255 is just FF when expressed in hexadecimal, it is easier to control it in hexadecimal when actually using it in the program. Based on this table, let's take a look at the hexadecimal numbers written in the source above.

imageProcess01_1.java

//Change the color depending on the coordinates
//Color information is saved in hexadecimal.
switch(index / 2500) {
case 0: 	color = 0xFFFF0000; break;
case 1: 	color = 0xFF00FF00; break;
case 2: 	color = 0xFF0000FF; break;
default: 	color = 0xFF000000; break;
}

In Java, all numbers starting with 0x are expressed in hexadecimal. And since 1Byte is displayed using two characters, if you take Case 0: as an example, it will be like this.

Opacity and red are 255, which means non-transparent red. Since the array is 100x100, the first 0 to 2499 in the 10000 array will be red. Image colors can be entered like this.

At the end

This is the basic image structure that the program loads. Once you understand this structure, you can easily modify the image with just the code, but can you think of anything? For the time being, I would like to talk about actual image processing, but I thought that it would be a shame to enter without knowing the very first basics, so I thought that many people know it, but I wrote this. I did.

Recently, there are many convenient libraries, and it may not be possible to actually create such an image processing function directly, but the degree of understanding depends on whether or not you know the principle. I think it will make a difference as much as the ground. Let's take this opportunity to make simple image processing by yourself without relying on a library. See you next time.