Image Orientation incorrect after LoadImage() and image()

Processing Coding Questions
1

A lot of images do not show the correct orientation, at least not the one that shows in the Windows Explorer and in image editors.

For a lot of images, after I have loaded them from the harddrive with loadimage(), and then put them on the canvas with image(), will show in landscape format, when the image was actually taken on my phone in portrait format, and shows that way (correctly) in Windows Explorer and in any other image programs.

Its annoying, as I want to put together a photo album, but cannot do it nicely due to this error.

Has anyone come across this and solved this?

2

Can you post a sample image that displays this behavior? Can we see a sample of your code that is loading and drawing the images?

It’s possible that there is some metadata in the images that describes the orientation, which Processing is ignoring. If this really is the case, it’s a bug/oversight.

3

Sure. Also thought that it might be an issue with metadata, but if it is, I have no clue how to solve.

Below you find the code. Its very simply. It loads 8 example images (jpg), resizes them, draws them onto the canvas and saves the canvas as a jpg. All 8 images are in portrait mode, but processing recognizes only 2 in portrait, and paints the rest in landscape mode.

Here you can find the whole project, including the images themselves:
https://drive.google.com/file/d/1BnWM8waUXQV6OAeszr3WbGGBaLM81AlV/view?usp=sharing

And here is the code:

void setup() {
size(400, 1300);
background(255);
noLoop();
}

void draw() {
int i;
int x;
int y;
int w;
int h;
float fact;
PImage img;
int rect = 200;

fact=0.05;
x=50;
y=50;

for(i=1;i<=8;i++) {
  img = loadImage(i+".jpg");    //loading image from harddrive
  
  // downsizing image size so they better fit onto a canvas
  w = int(img.width*fact);
  h = int(img.height*fact);
  img.resize(w,h);

  image(img,x,y);            // "painting" image on canvas
  y = y + h + 20;
}

save("final.jpg");      //output final file

}

4

one more note: I just used imagemagick to batch-update with auto-orientation on all files. processing now recognizes all files with correct orientation.

However, it should have been able to do that without me using imagemagick first, as windows and image editors were able to recognize the correct orientation.

5

@TfGuy44 guessed correctly.

Basically, you have a mix of photos with and without EXIF orientation tags. So, for example, 8.jpg doesn’t have one, but 3.jpg does.

Drag 3.jpg into this web analyzer:

…and you will see that its base image data is sideways, but it has an EXIF tag:

Orientation: Rotate 270 CW

For background, see:

Processing is ignoring that tag and just loading the raw image data.

Saving the images in a consistent way is the easiest solution.

If you want to detect metadata and act on it to rotate the image, you could use a Java EXIF metadata library:

2 Likes