In my android app, I have a car from which the user can click and select different panels. The image is relatively complicated (as opposed to the one pasted here) so its difficult to overlay the buttons in the correct spots. In addition there are a lot of different images.
The solution I would like to try:
Detect which panel was selected by using a colour mask as suggested here: https://blahti.wordpress.com/2012/06/26/images-with-clickable-areas/
Depending on the panels selected (in my example the blue and green) generate a mask.
Depending on the mask, have a red overlay on the car - just a colour filter will be fine.
(First image represents the colours used to determine which panel was clicked, second image represents the mask generated and the last image the 'result').
The only problem I'm having is: How do I dynamically create the mask? I thought of using a floodfill type method to create a new canvas with the 'mask' of the selected panels. But, I worry that it might be too computationally heavy. Any simpler suggestions?
[
UPDATE: Ok so I've come pretty far. As expected, the creation of the mask too way too long (2-4 seconds for a small image). But, then I discovered RenderScripts!! I think I can still get this to work. The only little snag that I have now is: How do I pass in the colours that have been pressed?
My current code looks like this:
// create a bitmap for the mask.
ImageView img = (ImageView) findViewById (mask);
img.setDrawingCacheEnabled(true);
Bitmap bitmap = Bitmap.createBitmap(img.getDrawingCache());
// Create a tiny bitmap to store the colours of the panels that are
//'selected'
Bitmap.Config conf = Bitmap.Config.ARGB_8888; // see other conf types
Bitmap myBitmap = Bitmap.createBitmap(pickedPanels.size(), 1, conf);
int [] myInts = new int[pickedPanels.size()];
for (int i = 0; i<pickedPanels.size(); i++){
myInts[i] = pickedPanels.get(i).intValue();
}
myBitmap.setPixels(myInts, 0, myBitmap.getWidth(), 0, 0,
myBitmap.getWidth(),0);
//Run thescript and set the output
final RenderScript rs = RenderScript.create(this);
final Allocation input = Allocation.createFromBitmap(rs, bitmap,
Allocation.MipmapControl.MIPMAP_NONE,Allocation.USAGE_SCRIPT);
final Allocation output = Allocation.createTyped(rs, input.getType());
final ScriptC_singlesource script = new
ScriptC_singlesource(rs);
script.set_image(Allocation.createFromBitmap(rs, myBitmap,
Allocation.MipmapControl.MIPMAP_NONE,Allocation.USAGE_SCRIPT));
script.set_imgWidth(pickedPanels.size());
script.forEach_root(input, output);
output.copyTo(bitmap);
img.setImageBitmap(bitmap);
ImageView destim = (ImageView) findViewById (dest);
destim.setDrawingCacheEnabled(true);
destim.setImageBitmap(bitmap);
and this is the script:
#pragma version(1)
#pragma rs java_package_name(za.co.overtake)
rs_allocation image;
int imgWidth;
uchar4 RS_KERNEL root(uchar4 in, uint32_t x, uint32_t y) {
for(int col = 0; col < imgWidth; col++){
const uchar4 colour = *(const uchar4*)rsGetElementAt(image, col,0);
if (in.r == colour.r && in.g == colour.g && in.b == colour.b){
in.r = 255;
in.g = 0;
in.b = 0;
break;
} else {
in.r = 0;
in.g = 255;
in.b = 0;
rsDebug("HELLLLLP>>", colour);
}
}
return in;
}
But, when I try and read the pixel values from myBitmap (or image in the script), RGB is always 0.
(Sorry for the bad naming, etc. I've been going crazy trying to figure this out)
Ok, finally got this figured out.
In my renderscript code I have:
#pragma version(1)
#pragma rs java_package_name(za.co.overtake)
int*reds;
int*greens;
int*blues;
int imgWidth;
uchar4 RS_KERNEL root(uchar4 in, uint32_t x, uint32_t y) {
bool colourme = false;
for(int col = 0; col < imgWidth; col++){
const int red = reds[col];
const int green = greens[col];
const int blue = blues[col];
if (in.r == red && in.g == green && in.b == blue){
colourme = true;
}
}
if (colourme) {
in.r = 255;
in.g = 0;
in.b = 0;
in.a = 50;
} else {
in.r = 0;
in.g = 0;
in.b = 0;
in.a = 0;
}
return in;
}
Then in Java
public void showDamagedPanels(int dest, int mask) {
int noOfColours = pickedPanels.size();
if (noOfColours > 0) {
ImageView img = (ImageView) findViewById (mask);
img.setDrawingCacheEnabled(true);
Bitmap bitmap = Bitmap.createBitmap(img.getDrawingCache());
img.setDrawingCacheEnabled(false);
int [] reds = new int[noOfColours];
int [] greens = new int[noOfColours];
int [] blues = new int[noOfColours];
for (int i = 0; i< noOfColours; i++){
int colour = pickedPanels.get(i);
reds[i] = (colour >> 16) & 0xFF;
greens[i] = (colour >> 8) & 0xFF;
blues[i] = (colour >> 0) & 0xFF;
}
final RenderScript rs = RenderScript.create(this);
final Allocation input = Allocation.createFromBitmap(rs, bitmap, Allocation.MipmapControl.MIPMAP_NONE,
Allocation.USAGE_SCRIPT);
final Allocation output = Allocation.createTyped(rs, input.getType());
final ScriptC_singlesource script = new ScriptC_singlesource(rs);
Allocation red = Allocation.createSized(rs, Element.I32(rs), reds.length);
red.copyFrom(reds);
script.bind_reds(red);
Allocation green = Allocation.createSized(rs, Element.I32(rs), greens.length);
green.copyFrom(greens);
script.bind_greens(green);
Allocation blue = Allocation.createSized(rs, Element.I32(rs), blues.length);
blue.copyFrom(blues);
script.bind_blues(blue);
script.set_imgWidth(pickedPanels.size());
script.forEach_root(input, output);
output.copyTo(bitmap);
ImageView destim = (ImageView) findViewById (dest);
destim.setDrawingCacheEnabled(true);
destim.setImageBitmap(bitmap);
} else {
ImageView destim = (ImageView) findViewById (dest);
destim.setImageBitmap(null);
}
}
where dest is the overlay image and mask in the image acting as the mask. So basically, when a panel is clicked - place its colour in pickedPanels. Then call the showPanels method, which calls the script. The script checks the colours and sets the resulting image red or clear.
Update: For anyone trying to use this, but having some issues: It is possible to do this without the renderscript code, but it does run a bit slower - though it has been ok in my case for small images.
private Bitmap changeColor(Bitmap src, Set<Integer> pickedPanelsList) {
int fine = getResources().getColor(R.color.colorAccent);
int width = src.getWidth();
int height = src.getHeight();
int[] pixels = new int[width * height];
// get pixel array from source
src.getPixels(pixels, 0, width, 0, 0, width, height);
Bitmap bmOut = Bitmap.createBitmap(width, height, src.getConfig());
int AGood = 100, RGood = Color.red(fine), GGood = Color.green(fine), BGood = Color.blue(fine);
int ABad = 100, RBad = Color.red(Color.RED), GBad = Color.green(Color.RED), BBad = Color.blue(Color.RED);
int pixel;
// iteration through pixels
for (int y = 0; y < height; ++y) {
for (int x = 0; x < width; ++x) {
// get current index in 2D-matrix
int index = y * width + x;
pixel = pixels[index];
if(pickedPanelsList.contains(pixel)){
pixels[index] = Color.argb(ABad, RBad, GBad, BBad);
} else if (Color.alpha(pixel) > 0){
pixels[index] = Color.argb(AGood, RGood, GGood, BGood);
}
}
}
bmOut.setPixels(pixels, 0, width, 0, 0, width, height);
return bmOut;
}
Here, the picked panel set is all the colours that should be coloured red (or chosen) and the bitmap is the mask (if I remember correctly, I did this a while ago). I've also found that doing a slight blur on the result makes the image look nicer - since it will obviously be less jagged.
Related
I'm currently in the process of converting Java to JavaScript and need to change the colour of some images.
Right now each image is loaded within an Image class, an image looks like this:
It's a PNG which works as a character set, the data sent through is mapped to each character in the image.
The existing Java code looks like this:
class VDColorFilter extends RGBImageFilter
{
int fg;
int bg;
final int[] colors;
public VDColorFilter(final int fgc, final int bgc) {
super();
this.colors = new int[] { 0, 16711680, 65280, 16776960, 255, 16711935, 65535, 16777215 };
this.fg = fgc;
this.bg = bgc;
this.canFilterIndexColorModel = true;
}
public int filterRGB(final int x, final int y, int rgb) {
if (rgb == -1) {
rgb = (0xFF000000 | this.colors[this.bg]);
}
else if (rgb == -16777216) {
rgb = (0xFF000000 | this.colors[this.fg]);
}
return rgb;
}
}
I want to be able to do the same thing to my images, but in JavaScript. I don't have much experience with Java, so I'm unsure on how the filterRGB actually applies the RGB result, against the colors array.
Of course, this is only tinting the black of the image, not the white.
Are there any libraries out there which mimic this? If not, what is my best way of achieving the same result?
You can filter an image using getImageData() and putImageData(). This will require cross-origin resource sharing (CORS) to be fulfilled, e.g. the image comes from the same server as the page (a security mechanism in the browser).
If that part is OK, lets do an example using your image -
The best would be if your images had an alpha channel instead of white background. This would allow you to use composite operators to change the colors directly without having to parse the pixels.
You can do this two ways:
Punch out the background once and for all, then use composite operator (recommended)
Replace all black pixels with the color
With the first approach you only have to parse the pixels once. Every time you need to change the colors just use a composite operator (see demo 2 below).
Using Composite Operator
Here is a way to punch out the background first. We will be using a unsigned 32-bit buffer for this as this is faster than using a byte-array.
We can convert the byte-buffer by using the view's buffer and create a second view for it:
var data32 = new Uint32Array(idata.data.buffer);
See code below for details:
var img = new Image();
img.crossOrigin = "";
img.onload = punchOut;
img.src = "//i.imgur.com/8NWz72w.png";
function punchOut() {
var canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d");
document.body.appendChild(this);
document.body.appendChild(canvas);
// set canvas size = image size
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
// draw in image
ctx.drawImage(this, 0, 0);
// get pixel data
var idata = ctx.getImageData(0, 0, canvas.width, canvas.height),
data32 = new Uint32Array(idata.data.buffer), // create a uint32 buffer
i = 0, len = data32.length;
while(i < len) {
if (data32[i] !== 0xff000000) data32[i] = 0; // if not black, set transparent
i++
}
ctx.putImageData(idata, 0, 0); // put pixels back on canvas
}
body {background:#aaa}
Now that we have a transparent image we can use composite modes to alter its colors. The mode we need to use is "source-atop":
var img = new Image();
img.crossOrigin = ""; img.onload = punchOut;
img.src = "//i.imgur.com/8NWz72w.png";
function punchOut() {
var canvas = document.querySelector("canvas"), ctx = canvas.getContext("2d");
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
ctx.drawImage(this, 0, 0);
var idata = ctx.getImageData(0, 0, canvas.width, canvas.height),
data32 = new Uint32Array(idata.data.buffer), i = 0, len = data32.length;
while(i < len) {if (data32[i] !== 0xff000000) data32[i] = 0; i++}
ctx.putImageData(idata, 0, 0);
// NEW PART --------------- (see previous demo for detail of the code above)
// alter color using composite mode
// This will replace existing non-transparent pixels with the next drawn object
ctx.globalCompositeOperation = "source-atop";
function setColor() {
for (var y = 0; y < 16; y++) {
for (var x = 0; x < 6; x++) {
var cw = (canvas.width - 1) / 6,
ch = (canvas.height - 1) / 16,
cx = cw * x,
cy = ch * y;
// set the desired color using fillStyle, here: using HSL just to make cycle
ctx.fillStyle = "hsl(" + (Math.random() * 360) + ", 100%, 80%)";
// fill the area with the new color, due to comp. mode only existing pixels
// will be changed
ctx.fillRect(cx+1, cy+1, cw-1, ch-1);
}
}
}
setInterval(setColor, 100);
// to reset comp. mode, use:
//ctx.globalCompositeOperation = "source-over";
}
body {background:#333}
<canvas></canvas>
And finally, use drawImage() to pick each letter based on mapping and cell calculations for each char (see for example the previous answer I gave you for drawImage usage).
Define a char map using a string
Find the letter using the map and indexOf()
Calculate the index of the map to x and y in the image
Use drawImage() to draw that letter to the x/y position in the output canvas
Random letters
var img = new Image();
img.crossOrigin = ""; img.onload = punchOut;
img.src = "http://i.imgur.com/8NWz72w.png";
function punchOut() {
var canvas = document.querySelector("canvas"), ctx = canvas.getContext("2d");
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
ctx.drawImage(this, 0, 0);
var idata = ctx.getImageData(0, 0, canvas.width, canvas.height),
data32 = new Uint32Array(idata.data.buffer), i = 0, len = data32.length;
while(i < len) {if (data32[i] !== 0xff000000) data32[i] = 0; i++}
ctx.putImageData(idata, 0, 0);
ctx.globalCompositeOperation = "source-atop";
function setColor() {
for (var y = 0; y < 16; y++) {
for (var x = 0; x < 6; x++) {
var cw = (canvas.width - 1) / 6,
ch = (canvas.height - 1) / 16,
cx = cw * x,
cy = ch * y;
ctx.fillStyle = "hsl(" + (Math.random() * 360) + ", 100%, 80%)";
ctx.fillRect(cx+1, cy+1, cw-1, ch-1);
}
}
}
setColor();
// NEW PART --------------- (see previous demo for detail of the code above)
var dcanvas = document.createElement("canvas"), xpos = 0;
ctx = dcanvas.getContext("2d");
document.body.appendChild(dcanvas);
for(var i = 0; i < 16; i++) {
var cw = (canvas.width - 1) / 6,
ch = (canvas.height - 1) / 16,
cx = cw * ((Math.random() * 6)|0), // random x
cy = ch * ((Math.random() * 16)|0); // random y
ctx.drawImage(canvas, cx+1, cy+1, cw-1, ch-1, xpos, 0, cw-1, ch-1);
xpos += 16;
}
}
body {background:#333}
<canvas></canvas>
I'm trying to create a function that gets a bitmap and destiny color and returns the colored bitmap (without using paint). I found few ways of doing it but nothing works like I want it to.
The closest solution I was able to find is:
public static Bitmap changeImageColor(Bitmap srcBmp, int dstColor) {
int width = srcBmp.getWidth();
int height = srcBmp.getHeight();
float srcHSV[] = new float[3];
float dstHSV[] = new float[3];
Bitmap dstBitmap = Bitmap.createBitmap(width, height, Config.RGB_565);
for (int row = 0; row < height; row++) {
for (int col = 0; col < width; col++) {
Color.colorToHSV(srcBmp.getPixel(col, row), srcHSV);
Color.colorToHSV(dstColor, dstHSV);
// If it area to be painted set only value of original image
dstHSV[2] = srcHSV[2]; // value
int color2=Color.HSVToColor(dstHSV);;
dstBitmap.setPixel(col, row, Color.HSVToColor(dstHSV));
}
}
return dstBitmap;
}
but It doesn't work very well on transparent images as can be seen here (before and after):
Anyone has any other solutions (again without using paint at all)?
You just need to extract alpha and re-apply it after transformation. And use ARGB_8888;
Edited your code to include alpha:
public Bitmap colorize(Bitmap srcBmp, int dstColor) {
int width = srcBmp.getWidth();
int height = srcBmp.getHeight();
float srcHSV[] = new float[3];
float dstHSV[] = new float[3];
Bitmap dstBitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);
for (int row = 0; row < height; row++) {
for (int col = 0; col < width; col++) {
int pixel = srcBmp.getPixel(col, row);
int alpha = Color.alpha(pixel);
Color.colorToHSV(pixel, srcHSV);
Color.colorToHSV(dstColor, dstHSV);
// If it area to be painted set only value of original image
dstHSV[2] = srcHSV[2]; // value
dstBitmap.setPixel(col, row, Color.HSVToColor(alpha, dstHSV));
}
}
return dstBitmap;
}
here is a sample code for change the color for a bitmap:
private BitmapDrawable getColoredBitmap(int color, Context context,
int drawableId) {
Bitmap source = BitmapFactory.decodeResource(context.getResources(),
drawableId);
final Bitmap bitmap = Bitmap.createBitmap(source.getWidth(),
source.getHeight(), Bitmap.Config.ARGB_8888);
for (int i = 0; i < source.getWidth(); i++) {
for (int j = 0; j < source.getHeight(); j++) {
int pixel = source.getPixel(i, j);
// if (pixel == Color.TRANSPARENT) {
//
// } else
if (pixel == Color.WHITE) {
pixel = Color.argb(Color.alpha(pixel),
Color.red(Color.WHITE), Color.green(Color.WHITE),
Color.blue(Color.WHITE));
} else {
pixel = Color.argb(Color.alpha(pixel), Color.red(color),
Color.green(color), Color.blue(color));
}
bitmap.setPixel(i, j, pixel);
}
}
return new BitmapDrawable(context.getResources(), bitmap);
}
You do this:
int alpha=srcBmp.getPixel(col, row);
dstBitmap.setPixel(col, row, Color.HSVToColor(dstHSV));
in which you calculate an alpha (probably incorrectly from the looks of that code) and then don't use it. You are probably going to have to create a Color with HSVToColor, then set the alpha of that color, then use it in setPixel. And you are probably going to have to get the alpha in a similar way because I find it hard to believe a getPixel function only returns the alpha :p
Here is my code for converting a png image to binary image form.Although sometime it convert one image to binary image form but on some other time it convert it to binary image form with image rotated to some angle..here buffered image is the input png image that i wana convert to binary form
public static byte[][] binarizeImage(BufferedImage bfImage){
final int THRESHOLD = 160;
int height = bfImage.getHeight();
int width = bfImage.getWidth();
byte[][] image = new byte[width][height];
for(int i=0; i<width; i++){
for(int j=0; j<height; j++){
Color c = new Color(bfImage.getRGB(i,j));
int red = c.getRed();
int green = c.getGreen();
int blue = c.getBlue();
if(red<THRESHOLD && green<THRESHOLD && blue<THRESHOLD){
image[i][j] = 1;
}else{
image[i][j] = 0;
}
}
}
return image;
}
can anyone pls tel the problem.for some images it works for other it doesnt.i making use of getrgb function
EDIT: Just improving legibility.
I making App in netbeans platform using java Swing and JAI. In this i want to do image processing. I capture .tiff black and white image using X-Ray gun. after that i want to plot histogram of that Black and White image. so, for plot to histogram , first we have to get gray or black and white image pixel value. then we can plot histogram using this pixel value.so, how can i get this pixel value of black and white image?
This should work if you use java.awt.image.BufferedImage.
Since you want to create a histogram, I suppose you will loop through all the pixels. There is the method for returning a single pixel value.
int getRGB(int x, int y)
However, since looping will take place I suppose you'd want to use this one:
int[] getRGB(int startX, int startY, int w, int h, int[] rgbArray, int offset, int scansize)
When you get the array, use:
int alpha = (pixels[i] >> 24) & 0x000000FF;
int red = (pixels[i] >> 16) & 0x000000FF;
int green = (pixels[i] >>8 ) & 0x000000FF;
int blue = pixels[i] & 0x000000FF;
To extract the channel data. Not sure if the variables can be declared as byte (we are using only one byte of the integer in the array, although byte is signed and different arithmetic takes place - two's complement form), but you can declare them as short.
Then preform some maths on these values, for example:
int average = (red + green + blue) / 3;
This will return the average for the pixel, giving you a point you can use in a simple luminosity histogram.
EDIT:
Regarding histogram creation, I have used this class. It takes the image you want the histogram of as an argument to its setImage(BufferedImage image) method. Use updateHistogram() for array populating. The drawing data is in paintComponent(Graphics g). I must admit, it is sloppy, especially when calculating the offsets, but it can be easily simplified.
Here is the whole class:
class HistogramCtrl extends JComponent
{
BufferedImage m_image;
int[] m_histogramArray = new int[256]; //What drives our histogram
int m_maximumPixels;
public HistogramCtrl(){
m_maximumPixels = 0;
for(short i = 0; i<256; i++){
m_histogramArray[i] = 0;
}
}
void setImage(BufferedImage image){
m_image = image;
updateHistogram();
repaint();
}
void updateHistogram(){
if(m_image == null) return;
int[] pixels = m_image.getRGB(0, 0, m_image.getWidth(), m_image.getHeight(), null, 0, m_image.getWidth());
short currentValue = 0;
int red,green,blue;
for(int i = 0; i<pixels.length; i++){
red = (pixels[i] >> 16) & 0x000000FF;
green = (pixels[i] >>8 ) & 0x000000FF;
blue = pixels[i] & 0x000000FF;
currentValue = (short)((red + green + blue) / 3); //Current value gives the average //Disregard the alpha
assert(currentValue >= 0 && currentValue <= 255); //Something is awfully wrong if this goes off...
m_histogramArray[currentValue] += 1; //Increment the specific value of the array
}
m_maximumPixels = 0; //We need to have their number in order to scale the histogram properly
for(int i = 0; i < m_histogramArray.length;i++){ //Loop through the elements
if(m_histogramArray[i] > m_maximumPixels){ //And find the bigges value
m_maximumPixels = m_histogramArray[i];
}
}
}
protected void paintComponent(Graphics g){
assert(m_maximumPixels != 0);
Rectangle rect = g.getClipBounds();
Color oldColor = g.getColor();
g.setColor(new Color(210,210,210));
g.fillRect((int)rect.getX(), (int)rect.getY(), (int)rect.getWidth(), (int)rect.getHeight());
g.setColor(oldColor);
String zero = "0";
String thff = "255";
final short ctrlWidth = (short)rect.getWidth();
final short ctrlHeight = (short)rect.getHeight();
final short activeWidth = 256;
final short activeHeight = 200;
final short widthSpacing = (short)((ctrlWidth - activeWidth)/2);
final short heightSpacing = (short)((ctrlHeight - activeHeight)/2);
Point startingPoint = new Point();
final int substraction = -1;
startingPoint.x = widthSpacing-substraction;
startingPoint.y = heightSpacing+activeHeight-substraction;
g.drawString(zero,widthSpacing-substraction - 2,heightSpacing+activeHeight-substraction + 15);
g.drawString(thff,widthSpacing+activeWidth-substraction-12,heightSpacing+activeHeight-substraction + 15);
g.drawLine(startingPoint.x, startingPoint.y, widthSpacing+activeWidth-substraction, heightSpacing+activeHeight-substraction);
g.drawLine(startingPoint.x,startingPoint.y,startingPoint.x,heightSpacing-substraction);
double factorHeight = (double)activeHeight / m_maximumPixels; //The height divided by the number of pixels is the factor of multiplication for the other dots
Point usingPoint = new Point(startingPoint.x,startingPoint.y);
usingPoint.x+=2; //I want to move this two points in order to be able to draw the pixels with value 0 a bit away from the limit
Point tempPoint = new Point();
for(short i = 0; i<256; i++){
tempPoint.x = usingPoint.x;
tempPoint.y = (int)((heightSpacing+activeHeight-substraction) - (m_histogramArray[i] * factorHeight));
if((i!=0 && (i % 20 == 0)) || i == 255){
oldColor = g.getColor();
g.setColor(oldColor.brighter());
//Draw horizontal ruler sections
tempPoint.x = widthSpacing + i;
tempPoint.y = heightSpacing+activeHeight-substraction+4;
g.drawLine(tempPoint.x,tempPoint.y,widthSpacing + i,heightSpacing+activeHeight-substraction-4);
if(i <= 200){
//Draw vertical ruler sections
tempPoint.x = widthSpacing - substraction - 3;
tempPoint.y = heightSpacing+activeHeight-substraction-i;
g.drawLine(tempPoint.x,tempPoint.y,widthSpacing - substraction + 4, heightSpacing+activeHeight-substraction-i);
}
tempPoint.x = usingPoint.x;
tempPoint.y = usingPoint.y;
g.setColor(oldColor);
}
g.drawLine(usingPoint.x, usingPoint.y, tempPoint.x, tempPoint.y);
usingPoint.x++; //Set this to the next point
}
}
}
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);