I know I could just change it in a photo manipulation software, but I want to learn to do it programmatically so I can change it to any color I wish.
First off, I'd like to say that I've been searching for the solution around two hours and I couldn't find one that works for me, or one that deals with my exact problem.
I've downloaded some icons from the internet and they're originally black with transparent background, which is good for menu bars and stuff. But, they're hard to notice on my tool bar and I want to change the black color on those icons to white color. Here's an edited screenshot of what I'm trying to achieve and here's a screenshot of what I achieve. (Sorry for links, I need at least 10 reputation to post images.)
Here's my Utility class that's responsible for the failed work:
public final class Utility{
public static ImageIcon replaceIconColor(ImageIcon icon, Color oldColor, Color newColor){
BufferedImage image = iconToImage(icon);
for(int y = 0; y < image.getHeight(); y++){
for(int x = 0; x < image.getWidth(); x++){
Color pixel = new Color(image.getRGB(x, y));
if((pixel.getRed() == oldColor.getRed()) && (pixel.getGreen() == oldColor.getGreen()) && (pixel.getBlue() == oldColor.getBlue()) && (pixel.getAlpha() == oldColor.getAlpha())){
image.setRGB(x, y, newColor.getRGB());
}
}
}
return new ImageIcon(image);
}
public static BufferedImage iconToImage(ImageIcon icon){
return Resources.loadImage(icon.getDescription());
}
}
I'm not sure if you need resource loading class code, but I thought it could only help you to understand my problem fully and to be able to help me the best of your abilty. So, here's my Resources class code snippet:
public static ImageIcon loadImageIcon(String fileName){
URL imageURL = Resources.class.getResource("/Resources/Images/" + fileName);
ImageIcon imageIcon = new ImageIcon(imageURL);
imageIcon.setDescription(fileName);
return imageIcon;
}
public static BufferedImage loadImage(String fileName){
URL imageURL = Resources.class.getResource("/Resources/Images/" + fileName);
BufferedImage image = null;
try{
image = ImageIO.read(imageURL);
}catch(IOException e){
e.printStackTrace();
}
return image;
}
My apologies if there actually is a solution somewhere on the internet for this, but I couldn't find it. Well, that's all. I think I was specific enough.
Thank you in advance!
Two approaches are common:
Loop through the BufferedImage using getRGB() and setRGB() as needed, for example.
Use a LookupOp, as shown in the examples cited here.
Related
I'm attempting to convert a color image to a useable monochrome image, but without the "jagged" edges.
From a similar question asking to convert an image from color to black and white, one of the accepted answers provides a simple trick from JavaFX's ColorAdjust class using a setBrightness(-1) technique. This technique has the benefit of maintaining the soft edges between black and white, such as supporting a high-contrast theme without creating all-new icons set.
Note: I do understand the inaccuracy of the word "monochrome" here (some grayscaling will occur) but I'm not sure how else to describe this technique.
What's a way to mimic the ColorAdust technique using pure Java?
Desired:
NOT Desired:
This is a pure Java approach. The Swing code is not needed to create the image. Instead of changing the image to black and white, we are changing the image to black and transparent. That is how we preserve those feathered edges.
result:
If you want a true grayscale image with no alpha, make a graphics2d object, fill it with the desired background color, then draw the image onto it.
As for preserving whites as white, this can be done, but one of two thing must be conceded. Either you give up the black and white aspect and adopt a true grayscale image, or you keep your black and white, but get a jagged edge where white feathers into any other color. This occurs because once we hit a light color pixel, how do we know whether it is a light colored feature, or a transition pixel between white and another color. I don't know of a way to fix that without edge detection.
public class Main {
private static void createAndShowGUI() {
//swing stuff
JFrame.setDefaultLookAndFeelDecorated(true);
JFrame frame = new JFrame("Alpha Mask");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.getContentPane().setLayout(new BoxLayout(frame.getContentPane(), BoxLayout.PAGE_AXIS));
JLabel picLabel = new JLabel(new ImageIcon(getImg()));
frame.getContentPane().add(picLabel);
BufferedImage alphaMask = createAlphaMask(getImg());
JLabel maskLabel = new JLabel(new ImageIcon(alphaMask));
frame.getContentPane().add(maskLabel);
//Display the window.
frame.pack();
frame.setVisible(true);
}
public static BufferedImage getImg() {
try {
return ImageIO.read(new URL("https://i.stack.imgur.com/UPmqE.png"));
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
public static BufferedImage createAlphaMask(BufferedImage img) {
//TODO: deep copy img here if you actually use this
int width = img.getWidth();
int[] data = new int[width];
for (int y = 0; y < img.getHeight(); y++) {
// pull down a line if argb data
img.getRGB(0, y, width, 1, data, 0, 1);
for (int x = 0; x < width; x++) {
//set color data to black, but preserve alpha, this will prevent harsh edges
int color = data[x] & 0xFF000000;
data[x] = color;
}
img.setRGB(0, y, width, 1, data, 0, 1);
}
return img;
}
public static void main(String[] args) {
javax.swing.SwingUtilities.invokeLater(() -> createAndShowGUI());
}
}
I'm finishing my homework in OOP Java. The assignment is to load images on a JFrame, be able to move them around (top layer should be prioritized, it is currently not) and click them to "flip them" (change the source of the image essentially). I'm currently having trouble finding a solution on how to properly "layer" images that are visible on the screen and to prioritize the images on the top first (currently the bottom ones are being prioritized).
I also have issues finding a good way to change the source of the images, as our teacher has prohibited extending the Picture class with Swing.
My first attempt at solving this was saving the information of every individual "Picture" object in an ArrayList. This works to save the position of the images but does not solve my issue with the layering. I also wanted to use JLayeredPane but as I found out, it was harder than I thought as I have yet to find a viable solution this way (I might be missing some obvious facts about how it works).
I'm thinking what probably needs to happen is that I save the "position" of each image in some type of Array, then using this array to print out the images via paintComponent # ImagePanel. This is currently what I am doing but it does not act as I wish it to. I think my way of loading in the images in the "Picture" class might have something to do with it. I don't have a lot of experience in Java so all of this is new to me.
I don't want to print out all of my codes as I have 4 classes, so I'm going to print out what I feel are the essential methods in each class. If there's something missing that you guys need in order to guide me in the right direction I'll provide that aswell.
draw # Picture
public void draw(Graphics g, int i) {
try {
BufferedImage img = ImageIO.read(new File("images/icon_"+ i +".gif"));
g.drawImage(img, x, y, null);
} catch(IOException ie) {
System.out.println("Could not find images");
}
}
mousePressed & mouseDragged # MouseHandler
public void mousePressed (MouseEvent e) {
Point point = e.getPoint();
chosen = imagepanel.locateImage(point);
}
public void mouseDragged (MouseEvent e) {
int x = e.getX();
int y = e.getY();
if (chosen != null) {
imagepanel.moveImage(chosen, x, y);
}
}
loadImages & paintComponent # ImagePanel
private final static int IMAGES = 7;
private ArrayList <Picture> imageCollection = new ArrayList<>();
private Picture im;
Random rand = new Random();
public void loadImages() {
for(int i=0; i<IMAGES; i++) {
int x = rand.nextInt(400) + 40;
int y = rand.nextInt(400) + 60;
im = new Picture(x,y);
imageCollection.add(im);
}
}
#Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
int i = 0;
for (Picture im : imageCollection) {
i++;
im.draw(g, i);
}
}
I expect the images to stack on top of eachother whenever "flipped" (clicked) or moved (dragged). They do not currently do this as they just maintain their "depth" position. I've tried implementing an Image[] without success.
I also have a flip method where I tried using setIcon (I was using ImageIcon instead of Image previously) but this did not really work for some reason.
I also would love for any feedback on the code so far and any improvements that could be made as I always want to improve.
EDIT: I manage to solve my problems, however I'm sure there's a better way to do this.
public void placeFirst(Picture im) {
int pos = imageCollection.indexOf(im);
imageCollection.remove(pos);
imageCollection.add(0, im);
}
public void flipImage(Picture im) {
im.flip();
placeFirst(im);
repaint();
}
public void moveImage(Picture im, Point point) {
im.move(point.x-(im.getWidth(im)/2), point.y-(im.getHeight(im)/2));
placeFirst(im);
repaint();
}
public Picture locateImage(Point point) {
for (int i=0; i<imageCollection.size(); i++) {
Picture im = imageCollection.get(i);
if (im.fits(point)) {
return im;
}
}
return null;
}
#Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
// There probably exists a better and visually nicer way of doing this
for (int i=imageCollection.size()-1; i>=0; i--) {
Picture im = imageCollection.get(i);
im.draw(g);
}
}
chosen = imagepanel.locateImage(point);
Well, we don't know how the locateImage(...) method works, but I would guess you just iterate through the array until you find a match.
So you will always find the same match.
So if you want an image to stack on top you have two issues:
you need to modify the search order so that when you click on an image you move it to position 0 in the ArrayList so it is always found first
but know when you paint images you need to paint images from the end of the ArrayList to the beginning, so the first image in the ArrayList gets painted last.
I just found about Sikuli when I was looking for a library to find matches of a given image within a larger image (both loaded from files).
By default, Sikuli only supports loading the searched image from file, but relies on a proprietary class Screen to take screenshots to use as base for the search... And I'd like to have the ability to use a image file instead.
Looking for a solution has led me to this question, but the answer is a bit vague when you consider that I have no prior experience with Sikuli and the available documentation is not particularly helpful for my needs.
Does anyone have any examples on how to make a customized implementation of Screen, ScreenRegion, ImageScreen and ImageScreenLocation? Even a link to a more detailed documentation on these classes would be a big help.
All I want is to obtain the coordinates of an image match within another image file, so if there's another library that could help with this task I'd more than happy to learn about it!
You can implement it by yourself with something like this:
class MyImage{
private BufferedImage img;
private int imgWidth;
private int imgHeight;
public MyImage(String imagePath){
try{
img = ImageIO.read(getClass().getResource(imagePath));
}catch(IOException ioe){System.out.println("Unable to open file");}
init();
}
public MyImage(BufferedImage img){
this.img = img;
init();
}
private void init(){
imgWidth = img.getWidth;
imgHeight = img.getHeight();
}
public boolean equals(BufferedImage img){
//Your algorithm for image comparison (See below desc for your choices)
}
public boolean contains(BufferedImage subImage){
int subWidth = subImage.getWidth();
int subHeight = subImage.getHeight();
if(subWidth > imgWidth || subHeight > imgHeight)
throw new IllegalArgumentException("SubImage is larger than main image");
for(int x=0; x<(imgHeight-subHeight); x++)
for(int y=0; y<(imgWidth-subWidth); y++){
BufferedImage cmpImage = img.getSumbimage(x, y, subWidth, subHeight);
if(subImage.equals(cmpImage))
return true;
}
return false;
}
}
The contains method will grab a subimage from the main image and compare with the given subimage. If it is not the same, it will move on to the next pixel until it went through the entire image. There might be other more efficient ways than moving pixel by pixel, but this should work.
To compare 2 images for similarity
You have at least 2 options:
Scan pixel by pixel using a pair of nested loop to compare the RGB value of each pixel. (Just like how you compare two int 2D array for similarity)
It should be possible to generate a hash for the 2 images and just compare the hash value.
Aah... Sikuli has an answer for this too... You just didnt look close enough. :)
Answer : The FINDER Class
Pattern searchImage = new Pattern("abc.png").similar((float)0.9);
String ScreenImage = "xyz.png"; //In this case, the image you want to search
Finder objFinder = null;
Match objMatch = null;
objFinder = new Finder(ScreenImage);
objFinder.find(searchImage); //searchImage is the image you want to search within ScreenImage
int counter = 0;
while(objFinder.hasNext())
{
objMatch = objFinder.next(); //objMatch gives you the matching region.
counter++;
}
if(counter!=0)
System.out.println("Match Found!");
In the end I gave up on Sikuli and used pure OpenCV in my Android project: The Imgproc.matchTemplate() method did the trick, giving me a matrix of all pixels with "scores" for the likehood of that being the starting point of my subimage.
With Sikuli, you can check for the presence of an image inside another one.
In this example code, the pictures are loaded from files.
This code tell us if the second picture is a part of the first picture.
public static void main(String[] argv){
String img1Path = "/test/img1.png";
String img2Path = "/test/img2.png";
if ( findPictureRegion(img1Path, img2Path) == null )
System.out.println("Picture 2 was not found in picture 1");
else
System.out.println("Picture 2 is in picture 1");
}
public static ScreenRegion findPictureRegion(String refPictureName, String targetPictureName2){
Target target = new ImageTarget(new File(targetPictureName2));
target.setMinScore(0.5); // Precision of recognization from 0 to 1.
BufferedImage refPicture = loadPicture(refPictureName);
ScreenRegion screenRegion = new StaticImageScreenRegion(refPicture);
return screenRegion.find(target);
}
public static BufferedImage loadPicture(String pictureFullPath){
try {
return ImageIO.read(new File(pictureFullPath));
} catch (IOException e) {
e.printStackTrace();
return null;
}
}
To use Sikuli package, I added this dependency with Maven :
<!-- SIKULI libraries -->
<dependency>
<groupId>org.sikuli</groupId>
<artifactId>sikuli-api</artifactId>
<version>1.1.0</version>
</dependency>
I have set of images. Images have a simple background. I want to change that background to white using Marvin Framework and Java.
As I am new to Marvin, it is making me trouble to change the background. I also tried opencv for java but its giving unsatisfied link error.
Image Example:
To get a perfect result you'll need to find a way to remove shadows. But I think it is a good start point for you.
Algorithm:
Convert the image to binary color model (pixels are true or false) given a gray scale threshold.
Perform a morphological dilation for closing openings in the shoes boundary.
Fill the background with color rgb(255,0,255)
After filling the background with a new color in the binary image, set the same pixels to white in the original image.
output:
source code:
import static marvin.MarvinPluginCollection.*;
public class RemoveBackground {
public RemoveBackground(){
MarvinImage image = MarvinImageIO.loadImage("./res/shoes.jpg");
MarvinImage bin = MarvinColorModelConverter.rgbToBinary(image, 116);
morphologicalDilation(bin.clone(), bin, MarvinMath.getTrueMatrix(5, 5));
MarvinImage mask = MarvinColorModelConverter.binaryToRgb(bin);
boundaryFill(mask.clone(), mask, 5, 5, new Color(255,0,255));
for(int y=0; y<mask.getHeight(); y++){
for(int x=0; x<mask.getWidth(); x++){
if(mask.getIntColor(x, y) == 0xFFFF00FF){
image.setIntColor(x, y, 255,255,255);
}
}
}
MarvinImageIO.saveImage(image, "./res/shoes_out.jpg");
}
public static void main(String[] args) {
new RemoveBackground();
System.exit(0);
}
}
I am trying to create a custom Label. I want to do something like markups on an Image
depending on what the user enters. I really don't know how to do it but I hope that you will know what I am trying to achieve here. What is the proper way to derive the Label class? This is my code.
class CustomLabel extends Label
{
List paths;
Image image;
public CustomLabel(Image img,List paths)
{
this.image = img;
this.paths = paths;
}
public void paint(Graphics g)
{
g.setColor(0x000000);
for (int i = 0; i < paths.size(); i++)
{
Path path = (Path)paths.getModel().getItemAt(i);
int firstLocX = path.discoveredNode.getX();
int firstLocY = path.discoveredNode.getY();
int secondLocX = path.nodeDiscovered.getX();
int secondLocY = path.nodeDiscovered.getY();
g.drawLine(firstLocX, firstLocY, secondLocX, secondLocY);
}
g.drawImage(image, 0, 0);
UIManager.getInstance().getLookAndFeel().drawLabel(g, this);
}
}
I hope you can help me with this.
Thanks,
You shouldn't use UIManager.getInstance().getLookAndFeel().drawLabel(g, this);
Since you want your drawing to appear on top you want the label to draw first and then have your code so the first line in the paint method should be super.paint(g) which will take care of that.
Your call to drawImage draws it at 0,0 which is always wrong. You should position drawing based on getX() and getY().
Having said that I don't see anything that warrants subclassing. If you just want to draw an emblem why not create a style that has an aligned image in its background with the given emblem. Then just conditionally assign the right UIID to the label.