Use of ColorPicker on an image in JavaFX

Question

I have an image in the imageview. What I want to do is add color to it. Basically it's like a layer of color on the image. So I am trying to add color to a t-shirt image using the ColorPicker and I don't know how I can do that. I've tried it along with the colorAdjust class but its giving me a different color on the tshirt than the one I've chosen from the ColorPicker.

I am using SceneBuilder, btw.

GUI

T-shirt

@FXML
private void changecolor(ActionEvent event) {      
    Color mycolor=mycolorpicker.getValue();
    label.setBackground(new Background(new BackgroundFill(mycolor,null,null)));
    Image img=new Image(getClass().getResourceAsStream("tshirt7.PNG"));
    imageV.setImage(img);
    ColorAdjust colorAdjust = new ColorAdjust();
    colorAdjust.setHue((mycolor.getHue()/360));
    colorAdjust.setSaturation(mycolor.getSaturation());
    colorAdjust.setBrightness(mycolor.getBrightness()-1);
   
    imageV.setEffect(colorAdjust);
}

I was expecting the same color on the image as the one I've chosen from ColorPicker. But the color on the tshirt is not accurate.

Please don't put pictures of code, paste the code as text into the question. — geanakuch, Jul 06 '23 at 06:29
But do include the pictures necessary to replicate your issue (the original t shirt image). — jewelsea, Jul 06 '23 at 08:36

jewelsea · Answer 1 · 2023-07-07T00:23:34.843

How to color an image from a color picker.

Ensure your png input image has appropriate areas of transparent color (your example t-shirt image does).
Define a ColorPicker to pick your color.
Bind the picked color to a MULTIPLY blended ColorInput effect on a desaturated monochrome adjusted or grayscaled image, with the image clipped by a clip defined by the image.

For more info see:

How to change color of image in JavaFX

Example

Place the image used (I used the image provided in your question) in a resource folder with the same directory structure as the package you place the sample code in.

import javafx.application.Application;
import javafx.beans.property.ObjectProperty;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.ColorPicker;
import javafx.scene.effect.*;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

import java.util.Objects;

public class TShirtDesigner extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        ColorPicker colorPicker = new ColorPicker();

        Image tshirtImage = new Image(
                Objects.requireNonNull(
                        TShirtDesigner.class.getResource(
                                "tshirt.png"
                        )
                ).toExternalForm()
        );

        ImageView tshirt = new ImageView(tshirtImage);
        tshirt.setClip(new ImageView(tshirtImage));

        bindImageColor(
                tshirt,
                colorPicker.valueProperty()
        );

        VBox layout = new VBox(
                10,
                colorPicker,
                tshirt
        );
        layout.setAlignment(Pos.CENTER);
        layout.setPadding(new Insets(10));

        Scene scene = new Scene(layout);
        stage.setScene(scene);
        stage.show();
    }

    private static void bindImageColor(
            ImageView imageView,
            ObjectProperty<Color> colorProperty
    ) {
        ColorInput colorInput = new ColorInput(
                0,
                0,
                imageView.getImage().getWidth(),
                imageView.getImage().getHeight(),
                colorProperty.get()
        );
        colorInput.paintProperty().bind(
                colorProperty
        );

        ColorAdjust monochrome = new ColorAdjust();
        monochrome.setSaturation(-1.0);

        Blend colorBlend = new Blend(
                BlendMode.MULTIPLY,
                monochrome,
                colorInput
        );

        imageView.setEffect(colorBlend);
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Thanks a lot @jewelsea. IT WORKED!! You've done a massive favour to me. I was stuck at this for 4 days. I am not sure how to reply a user in this platform as I am a new user but I hope it reaches you! — zaman, Jul 08 '23 at 07:33

Use of ColorPicker on an image in JavaFX

1 Answers1