image - Reduce number of colors and get color of a single pixel

Question

Using JavaFX 2.2 I need to do the following:

1. Reduce the color of a given image (e.g. loaded using the JavaFX image class) to lets say 8 or 16 colors, or maybe 256 colors
2. Access the color of single pixels in the image object - OK, seems like Image.getPixelReader() should do the job, so only the first question should remain

Can anyone give me some hints or code examples on this? Thanks :-)

Answer 1

1. Use image.getPixelReader() to get a hold of the PixelReader to access individual pixels in the image.
2. Create a WritableImage.
3. Get the PixelWriter of the WritableImage.
4. Iterate through the pixels read from the pixel reader, run each pixel through a downscaling algorithm for it's color palette and write the downscaled pixel to the pixel writer.

After you have done this, you can display the downsampled WritableImage in an ImageView or convert it to an awt image and save it as a png, jpg, etc.

Here is some sample code:

import javafx.application.Application;
import javafx.event.*;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.image.*;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

// displays a button with a 64 color image palette and a full color palette when pressed.
public class ButtonShadeTest extends Application {
  @Override public void start(final Stage stage) throws Exception {
    final Label response = new Label("");
    final Image originalImage = new Image("http://icons.iconarchive.com/icons/eponas-deeway/colobrush/128/heart-2-icon.png");
    final Image resampledImage = resample(originalImage);
    final ImageView imageView = new ImageView(resampledImage);
    final Button button = new Button("I love you", imageView);
    button.setStyle("-fx-base: coral;");
    button.setContentDisplay(ContentDisplay.TOP);
    button.setOnAction(new EventHandler<ActionEvent>() {
      @Override public void handle(ActionEvent event) {
        if ("".equals(response.getText())) {
          response.setText("I love you too!");
          imageView.setImage(originalImage);
        } else {
          response.setText("");
          imageView.setImage(resampledImage);
        } 
      }
    });

    final VBox layout = new VBox(10);
    layout.setAlignment(Pos.CENTER);
    layout.getChildren().addAll(button, response);
    layout.setStyle("-fx-background-color: cornsilk; -fx-padding: 10; -fx-font-size: 20;");
    stage.setTitle("Heart");
    stage.getIcons().add(originalImage);
    stage.setScene(new Scene(layout));
    stage.show();
  }
  public static void main(String[] args) { launch(args); }

  // downsamples an image to a 64 color palette by only 
  // using the 2 most significant bits of color to represent
  // each of the image's pixels.
  private Image resample(Image inputImage) {
    int W = (int) inputImage.getWidth();
    int H = (int) inputImage.getHeight();
    WritableImage outputImage = new WritableImage(W, H);
    PixelReader reader = inputImage.getPixelReader();
    PixelWriter writer = outputImage.getPixelWriter();
    for (int y = 0; y < H; y++) {
      for (int x = 0; x < W; x++) {
        int argb = reader.getArgb(x, y);
        int a = (argb >> 24) & 0xFF;
        int r = (argb >> 16) & 0xFF;
        int g = (argb >>  8) & 0xFF;
        int b =  argb        & 0xFF;

        r = r & 0xC0;
        g = g & 0xC0;
        b = b & 0xC0;

        argb = (a << 24) | (r << 16) | (g << 8) | b;
        writer.setArgb(x, y, argb);
      }
    }

    return outputImage;
  }
}
// icon license: (creative commons with attribution) http://creativecommons.org/licenses/by-nc-nd/3.0/
// icon artist attribution page: (eponas-deeway) http://eponas-deeway.deviantart.com/gallery/#/d1s7uih

When the heart is broken it displays with a reduced color palette, when the heart is whole it displays with a full color palette.