Grayscale Conversion In javaFX

The problem discussed in this post is quite common. In fact, you can find lots and lots of tutorials on it. You can take this post as one more addition to the available resources. The problem that we are going to discuss in this post is "Converting Colored Image To Black and White or to Grayscale".

In computer science terminology, color image is known as the RGB image. RGB stands for RED, GREEN, BLUE. Since these are the primary colors and all the other colors are made up of these colors, all the colored images that we click with our digital cameras fall into the category of RGB images.

Similarly, the images that are black and white, in computer terminology are known as Grayscale images. Grayscale means having different shades of gray. Basically, the black and white images do not have black and white colors, they have different shades of gray color. Below, I have explained algorithms for converting color image to black and white.

Algorithm for Grayscale Conversion

There are various algorithms to convert the color image to black and white. Here I am going to discuss two of them. One is naive and not very  efficient whereas the second one is much more efficient. But before we begin the algorithm we must understand how does the algorithm work? All gray scale conversion includes these basic steps,

• Get the red, green and blue value of pixels.

• Use fancy maths to turn those numbers into a single gray value.

• Replace the original red, green and blue values into a gray scale value.

Method 1 - Averaging (aka “quick and dirty”)

This method is most boring. Averaging is the most common gray scale method and it works like this

GRAY = (RED + GREEN + BLUE) / 3

Basically in this algorithm we calculate the value of gray color as shown above and assign it to red, green and blue values of the pixels. Fast, simple – no wonder this is a go to method for the rookie programmers. This formula generates a reasonably nice grayscale equivalent, and its simplicity makes it easy to implement and optimize. However this formula has its own shortcomings. While fast and simple this formula does a poor job of representing shades of gray relative to way humans perceive luminosity (brightness). For that we need bit more complex.

Method 2 - Luminescence Method (Correction for human eye)

The first method fails because of the fact that cone density is not uniform across colors. Humans perceive green more strongly than red, and red more strongly than blue. This is because much of the natural world appear green, so humans have evolved greater sensitivity to green light. Because humans do not perceive all colors equally, the “average method” of grayscale is inaccurate.

In this method instead of treating red, blue and green light equally, a good grayscale conversion will weight each color based on how human eye perceives it. A common formula found in image processor programs is shown below,

Gray = (Red * 0.3 + Green * 0.59 + Blue * 0.11)

This method is used in the code to make the color image black and white, or RGB image to Grayscale. The algorithm works in three basic steps as explained above.

Below you can see the source code,

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package grayscaleconversion;
import java.io.File;
import java.net.MalformedURLException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javafx.application.Application;
import javafx.concurrent.Service;
import javafx.concurrent.Task;
import javafx.concurrent.WorkerStateEvent;
import javafx.event.ActionEvent;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ProgressBar;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.image.PixelReader;
import javafx.scene.image.PixelWriter;
import javafx.scene.image.WritableImage;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.stage.FileChooser;
import javafx.stage.Stage;
/**
 *
 * @author Passionate Coder
 */
public class GrayScaleConversion extends Application {
    private Image image; //used to load the image
    private ImageView iv = new ImageView(); //ImageView to display the image
    private Button selectBTN = new Button(); //Button to select the Image in RGB
    private Button convertBTN = new Button(); //Button to convert the image in Grayscale
    private PixelReader preader; //Used to read the pixel of the image
    private PixelWriter pwriter; //Used to write the pixel
    private File filePath = null; //Stores the file path
    private ProgressBar pbar = new ProgressBar(0); //Shows the progress of the conversion
    WritableImage wimage;
    @Override
    public void start(Stage primaryStage) {
        //font used in the program
        Font poorRichard = new Font("Poor Richard", 16);
        //Settings of the UI Interface
        selectBTN.setText("Select Image");
        selectBTN.setFont(poorRichard);
        selectBTN.setLayoutX(20);
        selectBTN.setLayoutY(450);
        convertBTN.setText("Convert GrayScale");
        convertBTN.setFont(poorRichard);
        convertBTN.setLayoutX(200);
        convertBTN.setLayoutY(450);
        iv.setFitHeight(300);
        iv.setFitWidth(300);
        iv.setLayoutX(100);
        iv.setLayoutY(0);
        pbar.setLayoutX(20);
        pbar.setLayoutY(320);
        pbar.setPrefWidth(460);
        pbar.setVisible(false);
        //Event filed when the select Image button is pressed
        //Select the image in the RGB and display it
        selectBTN.setOnAction((ActionEvent ae) - > {
            FileChooser fc = new FileChooser();
            filePath = fc.showOpenDialog(primaryStage);
            if (filePath != null) {
                System.out.println();
                try {
                    image = new Image(filePath.toURI().toURL().toExternalForm());
                    iv.setImage(image);
                } catch (MalformedURLException ex) {
                    Logger.getLogger(GrayScaleConversion.class.getName()).log(Level.SEVERE, null, ex);
                }
            }
        });
        //Event fires when the convert button is pressed
        //Converts the RGB image in the gray scale
        convertBTN.setOnAction((ActionEvent ae) - > {
            pbar.progressProperty().unbind();
            pbar.progressProperty().bind(RGBToGRAYSCALE.progressProperty());
            pbar.setVisible(true);
            //Service to convert the RGB into gray scale
            RGBToGRAYSCALE.restart();
        });
        //Event fired when the service succeeded successfully!!!
        RGBToGRAYSCALE.setOnSucceeded((WorkerStateEvent we) - > {
            iv.setImage(wimage);
            pbar.setVisible(false);
        });
        Group root = new Group();
        Scene scene = new Scene(root, 500, 500);
        root.getChildren().add(selectBTN);
        root.getChildren().add(convertBTN);
        root.getChildren().add(iv);
        root.getChildren().add(pbar);
        primaryStage.setTitle("Grayscale Conversion");
        primaryStage.setScene(scene);
        primaryStage.setResizable(false);
        primaryStage.show();
    }
    /*Service to convert the RGB into grayscale
    Copies the image pixel by pixel by converting each
    pixel into grayscale
    */
    Service < Void > RGBToGRAYSCALE = new Service < Void > () {
        @Override
        protected Task < Void > createTask() {
            return new Task < Void > () {
                @Override
                protected Void call() throws Exception {
                    image = new Image(filePath.toURI().toURL().toExternalForm());
                    preader = image.getPixelReader();
                    wimage = new WritableImage((int) image.getWidth(), (int) image.getHeight());
                    pwriter = wimage.getPixelWriter();
                    int count = 0;
                    for (int i = 0; i < (int) image.getHeight(); i++) {
                        for (int j = 0; j < (int) image.getWidth(); j++) {
                            count += 1;
                            Color col = preader.getColor(j, i);
                            //Reading each pixel and converting it into gray scale
                            pwriter.setColor(j, i, new Color((col.getRed() * 0.3 + col.getGreen() * 0.59 + col.getBlue() * 0.11), (col.getRed() * 0.3 + col.getGreen() * 0.59 + col.getBlue() * 0.11), (col.getRed() * 0.3 + col.getGreen() * 0.59 + col.getBlue() * 0.11), 1.0));
                            updateProgress(count, image.getHeight() * image.getWidth());
                        }
                    }
                    return null;
                }
            };
        }
    };
    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
}

I hope you like it !