How do I create an in-memory fully transparent SWT image and draw a black line on it with antialias enabled?
I expect the result to include only black color and alpha values ranging from 0 to 255 due to antialias...
I googled and tried everything that I could... is this possible at all?
This is how I did and it works:
Image src = new Image(null, 16, 16);
ImageData imageData = src.getImageData();
imageData.transparentPixel = imageData.getPixel(0, 0);
src.dispose();
Image icon = new Image(null, imageData);
//draw on the icon with gc
I was able to make this work, although it feels a bit hacky:
Display display = Display.getDefault();
int width = 10;
int height = 10;
Image canvas = new Image(display, width, height);
GC gc = new GC(canvas);
gc.setAntialias(SWT.ON);
// This sets the alpha on the entire canvas to transparent
gc.setAlpha(0);
gc.fillRectangle(0, 0, width, height);
// Reset our alpha and draw a line
gc.setAlpha(255);
gc.setForeground(display.getSystemColor(SWT.COLOR_BLACK));
gc.drawLine(0, 0, width, height);
// We're done with the GC, so dispose of it
gc.dispose();
ImageData canvasData = canvas.getImageData();
canvasData.alphaData = new byte[width * height];
// This is the hacky bit that is making assumptions about
// the underlying ImageData. In my case it is 32 bit data
// so every 4th byte in the data array is the alpha for that
// pixel...
for (int idx = 0; idx < (width * height); idx++) {
int coord = (idx * 4) + 3;
canvasData.alphaData[idx] = canvasData.data[coord];
}
// Now that we've set the alphaData, we can create our
// final image
Image finalImage = new Image(canvasData);
// And get rid of the canvas
canvas.dispose();
After this, finalImage can be drawn into a GC with drawImage and the transparent parts will be respected.
I made it by allocating an ImageData, making it transparent then creating the Image from the data :
static Image createTransparentImage(Display display, int width, int height) {
// allocate an image data
ImageData imData = new ImageData(width, height, 24, new PaletteData(0xff0000,0x00ff00, 0x0000ff));
imData.setAlpha(0, 0, 0); // just to force alpha array allocation with the right size
Arrays.fill(imData.alphaData, (byte) 0); // set whole image as transparent
// Initialize image from transparent image data
return new Image(display, imData);
}
To scale with transparency, I've found that I have to manually set the alpha byte array as shown below. So the alpha ends up with nearest-neighbor anti aliasing.
public static Image scaleImage(Device device, Image orig, int scaledWidth, int scaledHeight) {
Rectangle origBounds = orig.getBounds();
if (origBounds.width == scaledWidth && origBounds.height == scaledHeight) {
return orig;
}
ImageData origData = orig.getImageData();
ImageData imData = new ImageData(scaledWidth, scaledHeight, origData.depth, origData.palette);
if (origData.alphaData != null) {
imData.alphaData = new byte[imData.width * imData.height];
for (int row = 0; row < imData.height; row++) {
for (int col = 0; col < imData.width; col++) {
int origRow = row * origData.height / imData.height;
int origCol = col * origData.width / imData.width;
byte origAlpha = origData.alphaData[origRow * origData.width + origCol];
imData.alphaData[row * imData.width + col] = origAlpha;
}
}
}
final Image scaled = new Image(device, imData);
GC gc = new GC(scaled);
gc.setAntialias(SWT.ON);
gc.setInterpolation(SWT.HIGH);
gc.setBackground(device.getSystemColor(SWT.COLOR_WHITE));
gc.fillRectangle(0, 0, scaledWidth, scaledHeight);
gc.drawImage(orig, 0, 0, origBounds.width, origBounds.height, 0, 0, scaledWidth, scaledHeight);
gc.dispose();
return scaled;
}
Related
I have some different size bitmap here:
and I want to resize them to same width and height (64px) each image
here is what I did:
int size = Math.round(64 * getResources().getDisplayMetrics().density);
int imagesLength = 4;
Bitmap bmp = Bitmap.createBitmap(size*imagesLength, size, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bmp);
for (int i = 0; i < imagesLength; i++) {
Bitmap mImage = getImage(i);
// ...code to get bitmap...
canvas.drawBitmap(mImage,i * size, 0, null);
}
do anyone got an idea? thanks
You can use Bitmap.createScaledBitmap (Bitmap src, int dstWidth, int dstHeight, boolean filter) to change the image to the size you want.
But this will not keep the aspect ratio intact. If thats important you might want to think of something else. Like scaling it down as you already did and adding it centered on some kind of background.
This gets you square bitmaps, no matter what:
int size = Math.round(64 * getResources().getDisplayMetrics().density);
int imagesLength = 4;
Bitmap bmp = Bitmap.createBitmap(size*imagesLength, size, Bitmap.Config.ARGB_8888); // the bitmap you paint to
Canvas canvas = new Canvas(bmp);
for (int i = 0; i < imagesLength; i++) {
Bitmap mImage = getImage(i);
// ...code to get bitmap...
mImage = Bitmap.createScaledBitmap(mImage , size, size, true);
canvas.drawBitmap(mImage,i * size, 0, null);
}
And this is for keeping the ratio but leaving gaps:
int size = Math.round(64 * getResources().getDisplayMetrics().density);
int imagesLength = 4;
Bitmap bmp = Bitmap.createBitmap(size*imagesLength, size, Bitmap.Config.ARGB_8888); // the bitmap you paint to
Canvas canvas = new Canvas(bmp);
for (int i = 0; i < imagesLength; i++) {
Bitmap mImage = getImage(i);
// ...code to get bitmap...
int width = mImage.getWidth();
int height= mImage.getHeight();
float ratio = width/(float)height;
if(ratio>1)
{
mImage = Bitmap.createScaledBitmap(mImage , size, size/ratio, true);
}
else
{
mImage = Bitmap.createScaledBitmap(mImage , size*ratio, size, true);
}
canvas.drawBitmap(mImage,i * size, 0, null);
}
How can I remove the white pixels of an image before loading it in the Panel
the method for loading image in panel is:
public void ajouterImage(File fichierImage) {
// desiiner une image à l'ecran
try {
monImage = ImageIO.read(fichierImage);
} catch (IOException e) {
e.printStackTrace();
}
repaint();
}
You can't remove a pixel for say from an image, but you sure can change the color of it, or even make it transparent.
Let's say you have a pixel array as a variable somewhere, and you can give it the RGB value of your BufferedImage. The pixel array will be called pixels:
try {
monImage = ImageIO.read(fichierImage);
int width = monImage.getWidth();
int height = monImage.getHeight();
pixels = new int[width * height];
image.getRGB(0, 0, width, height, pixels, 0, width);
for (int i = 0; i < pixels.length; i++) {
// I used capital F's to indicate that it's the alpha value.
if (pixels[i] == 0xFFffffff) {
// We'll set the alpha value to 0 for to make it fully transparent.
pixels[i] = 0x00ffffff;
}
}
} catch (IOException e) {
e.printStackTrace();
}
Assuming that by removing pixels you mean setting them to transparent, you need to set the alpha value of the image to zero. Here is a function colorToAlpha(BufferedImage, Color) which takes a BufferedImage and a Color as input and returns another BufferedImage with the Color set to transparent.
public static BufferedImage colorToAlpha(BufferedImage raw, Color remove)
{
int WIDTH = raw.getWidth();
int HEIGHT = raw.getHeight();
BufferedImage image = new BufferedImage(WIDTH,HEIGHT,BufferedImage.TYPE_INT_ARGB);
int pixels[]=new int[WIDTH*HEIGHT];
raw.getRGB(0, 0, WIDTH, HEIGHT, pixels, 0, WIDTH);
for(int i=0; i<pixels.length;i++)
{
if (pixels[i] == remove.getRGB())
{
pixels[i] = 0x00ffffff;
}
}
image.setRGB(0, 0, WIDTH, HEIGHT, pixels, 0, WIDTH);
return image;
}
Example usage:
BufferedImage processed = colorToAlpha(rawImage, Color.WHITE)
I have created a dialog in which a user can browse for an image and then see a preview of the image drawn on a canvas. The image is scaled so that its aspect ratio is maintained while fitting in the box. I used the method of resizing found in this answer, which involves converting an image from SWT to AWT, performing the resize, converting back from AWT to SWT, and finally drawing it on the canvas. Since this process is very costly in terms of time and processing power, I elect to skip the resizing step if the image is exactly the correct size, and thus does not need to be transformed in any way.
The issue comes up when dealing with images with alpha transparency. In some cases, images that have transparency that are converted first are drawn on the canvas with a black background. A copy of the same image that has been sized to the exact size of the canvas, and thus is not converted, has a white background.
However, this is also not always the case. Some images with transparent backgrounds will always show as white, whether they've been converted or not.
What causes an image with a transparent background to draw with one color over another in an SWT canvas? How does the AWT conversion affect it, and how can I cause it to become consistent if I so desire?
Here is the conversion code, taken in whole from another source:
public static BufferedImage convertToAWT (ImageData data) {
ColorModel colorModel = null;
PaletteData palette = data.palette;
if (palette.isDirect) {
colorModel = new DirectColorModel(data.depth, palette.redMask, palette.greenMask, palette.blueMask);
BufferedImage bufferedImage = new BufferedImage(colorModel, colorModel.createCompatibleWritableRaster(data.width, data.height),
false, null);
WritableRaster raster = bufferedImage.getRaster();
int[] pixelArray = new int[3];
for (int y = 0; y < data.height; y++) {
for (int x = 0; x < data.width; x++) {
int pixel = data.getPixel(x, y);
RGB rgb = palette.getRGB(pixel);
pixelArray[0] = rgb.red;
pixelArray[1] = rgb.green;
pixelArray[2] = rgb.blue;
raster.setPixels(x, y, 1, 1, pixelArray);
}
}
return bufferedImage;
}
else {
RGB[] rgbs = palette.getRGBs();
byte[] red = new byte[rgbs.length];
byte[] green = new byte[rgbs.length];
byte[] blue = new byte[rgbs.length];
for (int i = 0; i < rgbs.length; i++) {
RGB rgb = rgbs[i];
red[i] = (byte) rgb.red;
green[i] = (byte) rgb.green;
blue[i] = (byte) rgb.blue;
}
if (data.transparentPixel != -1) {
colorModel = new IndexColorModel(data.depth, rgbs.length, red, green, blue, data.transparentPixel);
} else {
colorModel = new IndexColorModel(data.depth, rgbs.length, red, green, blue);
}
BufferedImage bufferedImage = new BufferedImage(colorModel, colorModel.createCompatibleWritableRaster(data.width, data.height),
false, null);
WritableRaster raster = bufferedImage.getRaster();
int[] pixelArray = new int[1];
for (int y = 0; y < data.height; y++) {
for (int x = 0; x < data.width; x++) {
int pixel = data.getPixel(x, y);
pixelArray[0] = pixel;
raster.setPixel(x, y, pixelArray);
}
}
return bufferedImage;
}
}
public static ImageData convertToSWT (BufferedImage bufferedImage) {
if (bufferedImage.getColorModel() instanceof DirectColorModel) {
DirectColorModel colorModel = (DirectColorModel) bufferedImage.getColorModel();
PaletteData palette = new PaletteData(colorModel.getRedMask(), colorModel.getGreenMask(), colorModel.getBlueMask());
ImageData data = new ImageData(bufferedImage.getWidth(), bufferedImage.getHeight(), colorModel.getPixelSize(), palette);
WritableRaster raster = bufferedImage.getRaster();
int[] pixelArray = new int[3];
for (int y = 0; y < data.height; y++) {
for (int x = 0; x < data.width; x++) {
raster.getPixel(x, y, pixelArray);
int pixel = palette.getPixel(new RGB(pixelArray[0], pixelArray[1], pixelArray[2]));
data.setPixel(x, y, pixel);
}
}
return data;
}
else if (bufferedImage.getColorModel() instanceof IndexColorModel) {
IndexColorModel colorModel = (IndexColorModel) bufferedImage.getColorModel();
int size = colorModel.getMapSize();
byte[] reds = new byte[size];
byte[] greens = new byte[size];
byte[] blues = new byte[size];
colorModel.getReds(reds);
colorModel.getGreens(greens);
colorModel.getBlues(blues);
RGB[] rgbs = new RGB[size];
for (int i = 0; i < rgbs.length; i++) {
rgbs[i] = new RGB(reds[i] & 0xFF, greens[i] & 0xFF, blues[i] & 0xFF);
}
PaletteData palette = new PaletteData(rgbs);
ImageData data = new ImageData(bufferedImage.getWidth(), bufferedImage.getHeight(), colorModel.getPixelSize(), palette);
data.transparentPixel = colorModel.getTransparentPixel();
WritableRaster raster = bufferedImage.getRaster();
int[] pixelArray = new int[1];
for (int y = 0; y < data.height; y++) {
for (int x = 0; x < data.width; x++) {
raster.getPixel(x, y, pixelArray);
data.setPixel(x, y, pixelArray[0]);
}
}
return data;
}
return null;
}
Ok, since I think I finally understand your requirements, I decided to post an answer. Let me make sure that I understood it correctly:
You want to show an Image in your app in some sort of Widget that can be resized. The image should resize with its parent and keep transparency working.
Instead of resizing the image and displaying it in a Label or some other Widget, you can use a Canvas and paint the image to the appropriate size using GC#drawImage(Image image, int srcX, int srcY, int srcWidth, int srcHeight, int destX, int destY, int destWidth, int destHeight).
To use that function, you need the size of the Image, the size of the Canvas and the size of a correctly scaled (aspect ratio) version of the image.
Here is the code:
public static void main(String[] args)
{
Display display = Display.getDefault();
final Shell shell = new Shell(display);
shell.setLayout(new GridLayout(1, false));
/* Load the image and calculate size and ratio */
final Image image = new Image(display, "settings.png");
final Rectangle imageSize = image.getBounds();
final double imageRatio = 1.0 * imageSize.width / imageSize.height;
/* Define the canvas and set the background color */
final Canvas canvas = new Canvas(shell, SWT.BORDER);
canvas.setBackground(display.getSystemColor(SWT.COLOR_DARK_GRAY));
canvas.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true));
canvas.addListener(SWT.Paint, new Listener()
{
#Override
public void handleEvent(Event e)
{
Rectangle canvasSize = canvas.getBounds();
double canvasRatio = 1.0 * canvasSize.width / canvasSize.height;
int newHeight;
int newWidth;
/* Determine scaled height and width of the image */
if (canvasRatio > imageRatio)
{
newWidth = (int) (imageSize.width * (1.0 * canvasSize.height / imageSize.height));
newHeight = (int) (canvasSize.height);
}
else
{
newWidth = (int) (canvasSize.width);
newHeight = (int) (imageSize.height * (1.0 * canvasSize.width / imageSize.width));
}
/* Compute position such that the image is centered in the canvas */
int top = (int) ((canvasSize.height - newHeight) / 2.0);
int left = (int) ((canvasSize.width - newWidth) / 2.0);
/* Draw the image */
e.gc.drawImage(image, 0, 0, imageSize.width, imageSize.height, left, top, newWidth, newHeight);
}
});
shell.pack();
shell.open();
while (!shell.isDisposed())
{
if (!display.readAndDispatch())
display.sleep();
}
display.dispose();
/* DISPOSE THE IMAGE !!! */
image.dispose();
}
And this is what it looks like after starting:
and after resizing:
Note: I didn't have time to test it on Windows, but I'm fairly confident that it works.
It works on Windows as well!
EDIT:
Add these lines to enable antialiasing:
e.gc.setAntialias(SWT.ON);
e.gc.setAdvanced(true);
It's a bit late for an answer now, but as I've just had a similar experience and issues, I thought my findings might help others.
The original problem is with the supplied code that does the SWT->AWT and AWT->SWT conversions. When using a direct palette, transparency (alpha) is not catered for at all, but it is for an indexed palette, and that's why some images work and some do not.
It's relatively simple to fix that code to cope with transparency, but there are better solutions that do not need to got via AWT to get a resized image.
If you don't care about anti-aliasing (smoothness) of the converted image then a simple solution is:
Image newImage = new Image(image.getDevice(),
image.getImageData().scaledTo(newWidth, newHeight));
If you do care about smoothness then the solution is almost as simple:
Image newImage = new Image(image.getDevice(), newWidth, newHeight);
GC gc = new GC(newImage);
gc.setAdvanced(true);
gc.setAntialias(SWT.ON);
gc.drawImage(image, 0, 0, origWidth, origHeight, 0, 0, newWidth, newHeight);
gc.dispose();
How do I flip an Screenshot image? I can't find my problem anywhere else.Example code:
/*
*#param fileLoc //Location of fileoutput destination
*#param format //"png"
*#param WIDTH //Display.width();
*#param HEIGHT //Display.height();
*/
private void getScreenImage(){
int[] pixels = new int[WIDTH * HEIGHT];
int bindex;
// allocate space for RBG pixels
ByteBuffer fb = ByteBuffer.allocateDirect(WIDTH * HEIGHT * 3);//.order(ByteOrder.nativeOrder());
// grab a copy of the current frame contents as RGB
glReadPixels(0, 0, WIDTH, HEIGHT, GL_RGB, GL_UNSIGNED_BYTE, fb);
BufferedImage image = new BufferedImage(WIDTH, HEIGHT,BufferedImage.TYPE_INT_RGB);
// convert RGB data in ByteBuffer to integer array
for (int i=0; i < pixels.length; i++) {
bindex = i * 3;
pixels[i] =
((fb.get(bindex) << 16)) +
((fb.get(bindex+1) << 8)) +
((fb.get(bindex+2) << 0));
}
try {
//Create a BufferedImage with the RGB pixels then save as PNG
image.setRGB(0, 0, WIDTH, HEIGHT, pixels, 0 , WIDTH);
ImageIO.write(image, format , fileLoc);
}
catch (Exception e) {
System.out.println("ScreenShot() exception: " +e);
}
}
Basically the code works for capturing the screen and storing at as "png" format.
But it output's the image horizontally flipped, because glReadPixels();,
read from bottom-left to top-right.
So how do I flip the image horizontally before I ImageIO.write();?
Thanks in-front,
Rose.
E.G. of flipping an image horizontally using an AffineTransform.
import java.awt.*;
import java.awt.geom.AffineTransform;
import java.awt.image.BufferedImage;
import javax.swing.*;
public class Test001 {
public static BufferedImage getFlippedImage(BufferedImage bi) {
BufferedImage flipped = new BufferedImage(
bi.getWidth(),
bi.getHeight(),
bi.getType());
AffineTransform tran = AffineTransform.getTranslateInstance(bi.getWidth(), 0);
AffineTransform flip = AffineTransform.getScaleInstance(-1d, 1d);
tran.concatenate(flip);
Graphics2D g = flipped.createGraphics();
g.setTransform(tran);
g.drawImage(bi, 0, 0, null);
g.dispose();
return flipped;
}
Test001(BufferedImage bi) {
JPanel gui = new JPanel(new GridLayout(1,2,2,2));
gui.add(new JLabel(new ImageIcon(bi)));
gui.add(new JLabel(new ImageIcon(getFlippedImage(bi))));
JOptionPane.showMessageDialog(null, gui);
}
public static void main(String[] args) throws AWTException {
final Robot robot = new Robot();
Runnable r = new Runnable() {
#Override
public void run() {
final BufferedImage bi = robot.createScreenCapture(
new Rectangle(0, 360, 200, 100));
new Test001(bi);
}
};
SwingUtilities.invokeLater(r);
}
}
It's worth noting that it might be faster to simply read the pixels out of the buffer in the order you want them, rather than read them backwards and do a costly transform operation. Additionally, since you know for sure that the BufferedImage is TYPE_INT_RGB it should be safe to write directly into its raster.
ByteBuffer fb = BufferUtils.createByteBuffer(WIDTH * HEIGHT * 3);
BufferedImage image = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
glReadPixels(0, 0, WIDTH, HEIGHT, GL_RGB, GL_UNSIGNED_BYTE, fb);
int[] pixels = ((DataBufferInt) image.getRaster().getDataBuffer()).getData();
for (int i = pixels.length - 1; i >= 0; i--) {
int x = i % WIDTH, y = i / WIDTH * WIDTH;
pixels[y + WIDTH - 1 - x] = (fb.get() & 0xff) << 16 | (fb.get() & 0xff) << 8 | fb.get() & 0xff;
}
I'm creating a simple program which accepts a gray scale image as an input and what I simply want to do is retrieve the color information of each pixel, store it in an array of objects I call PixelClass. The ultimate goal is simply to repaint the image to a new BufferedImage using the said acquired color information.
Code used to create the pixel array from a given image.
public static PixelClass[][] getPixelArray(BufferedImage bi){
int height = bi.getHeight();
int width = bi.getWidth();
PixelClass[][] pixelArray = new PixelClass[height][width];
for(int i = 0 ; i < height ; i++){
for(int j = 0 ; j < width ; j++){
pixelArray [i] [j] = new PixelClass(bi.getRGB(j, i));
}
}
return pixelArray;
}
Code used to attempt to repaint the said image, using the array of PixelClass objects
public void paintToPanel(PixelClass [][] pc, int height, int width){
BufferedImage nbi = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);
for ( int i = 0 ; i < height ; i++){
for ( int j = 0 ; j < width ; j++){
nbi.setRGB(j, i, pc[i][j].getRGBValue());
}
}
JLabel containerLabel = new JLabel(new ImageIcon(nbi));
containerLabel.setBounds(10,10,nbi.getHeight(), nbi.getWidth());
this.add(containerLabel);
}
Links to original images
http://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs1364.snc4/163667_172099429501181_100001033756527_413302_3062182_n.jpg
As you can see there is significant degradation on the quality of the image. The resulting image appear to be faded.
I would suggest you use the MemoryImageSource class. Something like :
byte[] pixels = // your pixels
ColorSpace cs = ColorSpace.getInstance(ColorSpace.CS_GRAY);
int bits[] = new int[] {8};
ColorModel cm = new ComponentColorModel(cs, bits, false, false, Transparency.OPAQUE, DataBuffer.TYPE_BYTE);
MemoryImageSource mis = new MemoryImageSource(width, height, cm, pixels, 0, width);
Image im = Toolkit.getDefaultToolkit().createImage(mis);