Adjusting the size of an image (jpg)?

[Darrin Smith]

I have some images that are very large and need to adjust the size of them downward but keep the original aspect ratio.

Can anyone point me to some sample code on how this can be done?

In short, what I need to do is:

1) Load an image from the database (I can handle that).
2) Determine the size of the image.
3) If the image is too large, determine the aspect ratio then resize it.
4) Stream it out to my web app (I can handle that).

Note that the image will be read/processed by a servlet, and I'd like the keep the Image2D stuff to a minimum if possible.

Thanks!

[Joe Ess]

java.awt.Image) has width(), height() and getScaledInstance() methods.
[ June 15, 2005: Message edited by: Joe Ess ]

[Darrin Smith]

OK, I've done a little digging, but I'm not sure what I'm doing is the right/best way.

My images are stored in a database and I get them back as a byte[]. I also need to send them back out as a byte[] from the scaling method.

What I do is convert this byte[] to an ImageIcon, perform the calculations (see what ratio I need, etc.), use the Image.setScaledInstance, place this into a BufferedImage, and then finally into a ByteArrayOutputStream so I can get the final byte[].

The code looks something like this:

byte[] imageArray = imageDataDAO.getImage(table, set, type);
ImageIcon imageIcon = new ImageIcon(imageArray);
int height = imageIcon.getIconHeight();
int width = imageIcon.getIconWidth();
if(height > MAX_HEIGHT || width > MAX_WIDTH)
{
//Adjust size
Image image = imageIcon.getImage();
//See which one was over the most by percentage
float widthOver = (float)(height - MAX_HEIGHT) / (float)MAX_HEIGHT;
float heightOver = (float)(width - MAX_WIDTH) / (float)MAX_WIDTH;
int newWidth;
int newHeight;
if(widthOver > heightOver)
{
float ratio = MAX_HEIGHT / height;
newWidth = (int)(width * ratio);
newHeight = MAX_HEIGHT;
}
else
{
float ratio = MAX_HEIGHT / height;
newWidth = (int)(width * ratio);
newHeight = MAX_HEIGHT;
}
Image newImage = imageIcon.getImage();
newImage = newImage.getScaledInstance(newWidth, newHeight, Image.SCALE_SMOOTH);
BufferedImage buffImage = new BufferedImage(newWidth, newHeight, BufferedImage.TYPE_INT_RGB);
Graphics2D g2 = buffImage.createGraphics();
g2.drawImage(newImage, 0, 0, null);
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ImageIO.write(buffImage,"jpg", baos);
return baos.toByteArray();

Is there a better (easier/faster) way?

Thanks!

[Joe Ess]

 

Originally posted by Darrin Smith:

Is there a better (easier/faster) way?

What you've done, if it works, is probably fine. We don't get a lot of control over image loading and coversion in Java.
I dont see what imageDataDAO is, but I'd probably get the image out of the database result set as an InputStream and feed that directly to ImageIO to get a BufferedImage. In practical terms, it's probably doing the same amount of work you are doing above. Make sure you invoke flush() on all Image instances when you are finished with them. There's some resources which don't get freed automatically.

[Darrin Smith]

Well this doesn't seem to work.

It does get the image in the correct size and aspect ratio, but the image is displayed as one big black box!

Can anyone see the error of my ways here? I've seen examples that do something very similar to what I am trying so it must be something small.

BTW, thanks Joe, and yes, the ImageDataDAO is what gets the image out of the database as a byte array (uses Spring BTW).

Thanks!
[ June 15, 2005: Message edited by: Darrin Smith ]

[Joe Ess]

OK. I looked around in the attic and found a servlet where I was doing the same thing. Looks very much like your code, with the exception of using a -1 argument to the getScaledImage() call (resizes and preserves the aspect ratio):

public void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException{
File imgFile = new File(fileDir, fileName);
if (imgFile.exists()){
resp.setContentType("image/jpg");
BufferedImage i;
i = ImageIO.read(imgFile);
Image si = i.getScaledInstance(200, -1, Image.SCALE_FAST);
i = toBufferedImage(si);
OutputStream os = resp.getOutputStream();
ImageIO.write(i, "jpg", os);
} else {
System.out.println("Image file does not exist: "+fileName);
PrintWriter pw = new PrintWriter(resp.getOutputStream());
pw.write("X");
pw.flush();
pw.close();
}
}
public static BufferedImage toBufferedImage(Image img){
int width = img.getWidth(null);
int height = img.getHeight(null);
BufferedImage bi = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g = bi.getGraphics();
g.drawImage(img, 0,0, null);
g.dispose();
return bi;
}

I stripped out the code where it determines fileDir and fileName and caches the scaled instance since you are using a DB.
Are you sure your process to save the image to the DB works? What if you just grab it out of the db? Does it display properly?

[Darrin Smith]

Hi Joe,

Thanks for all of your work.

Yes, the image is saved correctly and it will display just fine when I show it full size.

Note though that I think I've got a solution!

I did a little test writing the image out to a file and, sure enough, it too was black. I then changed from a Graphics2D to Graphics and did the same thing...BINGO, now the image gets saved correctly!

Was I doing something wrong by using Graphics2d instead of Graphics?

Here is my test code (doesn't pass back a byte[], but that will come next):

try
{
FileInputStream inFile = new FileInputStream(args[0]);
ImageIcon imageIcon = new ImageIcon(args[0]);
Image image = imageIcon.getImage();
int height = image.getHeight(null);
int width = image.getWidth(null);
if(height > MAX_HEIGHT || width > MAX_WIDTH)
{
//See which one was over the most by percentage
float widthOver = (float)(height - MAX_HEIGHT) / (float)MAX_HEIGHT;
float heightOver = (float)(width - MAX_WIDTH) / (float)MAX_WIDTH;
int newWidth;
int newHeight;
if(widthOver > heightOver)
{
float ratio = (float)MAX_HEIGHT / (float)height;
newWidth = (int)(width * ratio);
newHeight = MAX_HEIGHT;
}
else
{
float ratio = (float)MAX_HEIGHT / (float)height;
newWidth = (int)(width * ratio);
newHeight = MAX_HEIGHT;
}
System.out.println("Original size was: width = " + width + " height = " + height);
System.out.println("New size is: width = " + newWidth + " height = " + newHeight);
Image newImage = image.getScaledInstance(newWidth, newHeight, Image.SCALE_SMOOTH);
BufferedImage bufferedImage = createBufferedImage(newImage);
// Write generated image to a file
try
{
// Save as PNG
File file = new File("newimage.jpg");
ImageIO.write(bufferedImage, "jpg", file);
}
catch (IOException ioe)
{
System.out.println("IOExcepotion caught: " + ioe.toString());
}
}
else
{
}
}
catch(IOException ioe)
{
System.out.println("IOException reading: " + args[0] + "\n" + ioe.toString());
}
}
static public BufferedImage createBufferedImage(Image imageIn)
{
BufferedImage bufferedImageOut = new BufferedImage(imageIn.getWidth(null),
imageIn.getHeight(null),
BufferedImage.TYPE_INT_RGB);
Graphics g = bufferedImageOut.getGraphics();
g.drawImage(imageIn, 0, 0, null);
return bufferedImageOut;
}

[Joe Ess]

That's odd. The only thing I see different is that it doesn't work when you use createGraphics() but works when you use getGraphics() though those methods are documented to do the same thing (i.e. return a graphics instance).
I told you this subject was a black hole.
Use what works
Don't forget to free up those Graphics instances with a call to dispose().

[Darrin Smith]

 

Originally posted by Joe Ess:
Don't forget to free up those Graphics instances with a call to dispose().

Sure will!

Thanks.

[marcus g.]

You can do the same thing using AffineTransforms which I have found to consume less memory

instead of:

Image newImage = image.getScaledInstance(newWidth, newHeight,Image.SCALE_SMOOTH);
BufferedImage bufferedImage = createBufferedImage(newImage);

you might try:

//this code is not in its entirety
File f = new File(uri);
stream = ImageIO.createImageInputStream(f);
}
reader.setInput(stream);
image = reader.read(0);
reader.removeAllIIOReadProgressListeners();
reader.dispose();
stream.flush();
stream.close();

and then once you have the BufferedImage.. you can manipulate it this way

AffineTransform
//where the newScale? is the new double in the event we want to keep aspect ratio
//obvious misssing code here again.. but this is really the gist of it.
scaleTransform=AffineTransform.getScaleInstance(getRatio(imageWidth, newScaleWidth), getRatio(imageHeight, newScaleHeight));
AffineTransformOp op;
op = new AffineTransformOp(scaleTransform, null);
image = op.filter(image, null);

And this is not really like modifying the same BufferedImage. op.filter returns a BufferedImage and the null value is supposed to be a destination BufferedImage I just overwrite what I was using before.

Anyone see any caveats there? I haven't had any problems yet.
This is also used from a servlet. Some other gotchas are trying to manipulate a file before you have it read in. Which is why I used the IIOPReadProgressListener..

also.. I'm not a graphics programming expert.. and this code is just hacked from my real code..
[ July 03, 2005: Message edited by: marcus g. ]

[Phil Adams]

 if(widthOver > heightOver)
{
float ratio = (float)MAX_HEIGHT / (float)height;
newWidth = (int)(width * ratio);
newHeight = MAX_HEIGHT;
}
else
{
float ratio = (float)MAX_HEIGHT / (float)height;
newWidth = (int)(width * ratio);
newHeight = MAX_HEIGHT;
}

I don't understand this part of your code...

It looks like it does the same thing no matter what..

Phil
[ August 26, 2008: Message edited by: Phil Wilson ]