Find image dimensions when loading image

mikemcsharry

Is it possible to open an image file, and get the size in pixels of the image as you load it? I have a bunch of photos with similar, but not identical, dimensions. I need to transform and rotate the images which is currently failing with some lovely screen displays!!

TfGuy44

Yes. If you have your image loaded, like so:

PImage img = loadImage( "filename.jpg" );

Then you can directly access the size of that image in pixels:

println( img.width );
println( img.height );

mikemcsharry

Brilliant - how did I miss that and thank you. I've just found exiftool which may also come in handy for another task

mikemcsharry

Hello again - I can see how img.width and img.height will work for what I need, but I'm making a basic mistake that I can't see the answer to. I'm loading the imag and showing the sizes exactly as tfGuy44 shows above, but when I use it in size() I get an error message "place size() function inside settings() rather than setup()" I've read the usage notes but can't see how I can call settings() as that seems to only specify max size as screen size.

//code to read file full of portrait images
// add data from text file and save them back as new images
// with new names based on data in the files
// note canon image sizes
//revised march 30 for desford5
//Record[] records;
String[] lines;
int recordCount;
PFont body;
//int num = 9; // Display this many entries on each screen.
//int startingEntry = 0;  // Display from this entry number
PImage img;  // Declare variable "a" of type PImage
String showfile;
String imageout;
String textout;
String runnerno;
String chiptime;
int imagew;
int imageh;


void setup() {

  //size(2000,2653);
  noLoop();

  body = loadFont("GothicNo13BT-Regular-48.vlw");
  textFont(body, 96);

  lines = loadStrings("Desford5a.csv");
  // records = new Record[lines.length];
  for (int i = 0; i < lines.length; i++) {
    String[] pieces = split(lines[i], ',' ); // Load data into array
    println (pieces [1]);
    println (showfile);
    showfile = "/Users/mikemcsharry/desktop/desford5/desford5/photosin/" + pieces[0] + ".jpg";

    textout = pieces[1];
    imageout = pieces[0] + ".jpg";
    runnerno = pieces[2];
    // chiptime = pieces[3];

    img = loadImage(showfile);
    println (img.width);
    println (img.height);
    imagew = (img.width);
    imageh = (img.height);
    size(imagew, imageh); //<<this is error
    pushMatrix();
    // move the origin to the pivot point
    translate(0, imageh); 

    // then pivot the grid
    rotate(radians(270));

    // and draw the image at the origin
    image (img, 0, 0);
    popMatrix();



    text(pieces[1], 1250, 2300);
    text(pieces[2], 1250, 2400);
    // text(pieces[3],1250,2500);

    save ("/Users/mikemcsharry/Desktop/desford5/desford5/timedphotos/" + imageout);
  }
  //that was end of setup
  //setup read in all the strings

}


  //class Record {
  // String infile;
  // String beast;

  // public Record(String[] pieces) {
  //   infile = pieces[0];
  //   beast = pieces[1];

  //  }
  //}

kfrajer

Check the fourth example:

https://processing.org/reference/settings_.html

In your case:

PImage img;
void settings(){
  img=loadImage("yourImage.jpg");
  size(img.width,img.height);
}

void setup(){  }

void draw(){   }

If you are working with different images, you can either resize your images or resize the sketch window.

Kf

koogs

But if you look at the code he's doing this in a loop. Which isn't going to work, I don't think.

I'd ditch the screen display and load and modify the images using createGraphics or something.

(Actually i'd probably use imagemagick)

mikemcsharry

koogs and kfrajer - thank you for your info here. The loop comment is correct, I've copied the code from a few exampls and I'm making what I need work really well, if the images are all the same size. The info is in a loop, as you've picked up and I did wonder about ditching screen display. I need to remove excess from the code and print it an look again. Koogs comment - imagemagick and creategraphics?? I'll look at that and thanks everyone for your help.

kfrajer

koogs is correct, you can use a PGraphics and save it directly. The concept is the following:

PGraphics pg=createGraphics(img.width,img.height,JAVA2D);
pg.beginDraw();
pg.image(img,0,0);
//Other changes directly on the pg object
pg.endDraw();

pg.save("filename.jpg");

Kf

koogs

(imagemagick is a non-Processing solution, it's a command line program for manipulating graphics.)

kfrajer

Btw @koogs,is it available in Windows? Not sure if the OP is using Win or Linux... I only have exp using imageMagick in Linux.

Kf

koogs

It is, but it's not as nice because DOS.

mikemcsharry

Hello again- sorry for delay getting back - I have MacBook and win 7 PC. I'm going to have a good look at the pgraphics tools - thank you :)

mikemcsharry

Hi everyone - thank you for your help - the pgraphics looks like it's taking me the right way - One question - how do I add text on to the images that I'm working with in the graphics tools? I've tried text and guessed at pg.text neither seemed to do anything (no output, no errors).. i see that text writes to the screen, and now by using the pgraphics tools I'm no longer writing to the screen so nothing for the text to go on..

Eeyorelife

Why not just resize the image to fit the window instead of the other way around? If all the images are the same size and always will be, you can just hardcode the window size.

koogs

Don't forget to do all the other text things as well. Setting the font and colours etc. In the graphics context I mean, using pg.

mikemcsharry

Ha - it might not show so much on this post but the images are not the same size. With same size images I've been able to knock out text marked pictures quite easily. (I take all the pictures in portrait) and have used the transform and rotate okay. The references to pgraphics are definitely helping, so I'm loading the images, manipulating them in processing and writing them back - they are now all going back in correct orientation with correct size but no text on :( I've found the detailed image class reference material and now trying to work out how to use it. Ive found this but not sure how to use it public void text(int num, float x, float y, float z)

mikemcsharry

koogs - this s where I may have confused myself. I think I've just understood that pg is almost like an entire sub language inside processing and needs things setting up the right way - please see my comment above - is the public void etc.. the way i need to approach this? (btw processing is awesome)

mikemcsharry

Ive been doing some searching and have found this forum post. I'll see if this is along he lines kooks was mentioning earlier https://forum.processing.org/one/topic/text-in-combination-with-pgraphics.html Its on my to do list for tomorrow :)

koogs

Post what you have now and we'll have a look.

pg is almost like an entire sub language

What that's doing is applying methods to that instance of the graphics object. Without the instance name it is applying them to the graphics instance that is the main sketch, ie the screen. Pretty much everything you can do to the screen you can do to an offscreen buffer...

mikemcsharry

thank you for your help everyone - here is my current sketch

// pgraphics test
// read in a csv file with user filed data. Images mixed sizes.
// all images portrait (tall)
// add text from csv file then write the image back

String[] lines;
int recordCount;
PFont body;
PImage img; 
String showfile;
String imageout;
String textout;
String runnerno;
String chiptime;
int imagew;
int imageh;


void setup() {

  // size(2000,2653);
  noLoop();

  body = loadFont("GothicNo13BT-Regular-48.vlw");
  textFont(body, 96);

  lines = loadStrings("pgraphics.csv");
  for (int i = 0; i < lines.length; i++) {
    String[] pieces = split(lines[i], ',' ); // Load data into array
    println (pieces [1]);
    println (showfile);
    showfile = "/Users/mikemcsharry/desktop/pgraphics/pgraphics/photosin/" + pieces[0] + ".jpg";

    textout = pieces[1];
    imageout = pieces[0] + ".jpg";
    runnerno = pieces[2];
    // chiptime = pieces[3];

    img = loadImage(showfile);
    println (img.width);
    println (img.height);
    imagew = (img.width);

    imageh = (img.height);
    PGraphics pg=createGraphics(imagew, imageh);
    //size(imagew, imageh);
    pushMatrix();
    // move the origin to the pivot point
    translate(0, imageh); 

    // then pivot the grid
    rotate(radians(270));
    pg.beginDraw();
    pg.image(img, 0, 0);
    // and draw the image at the origin
    //image (img, 0, 0);
    popMatrix();



    text(pieces[1], 1000, 1000);
    text(pieces[2], 1000, 1200);
    pg.endDraw();
    // text(pieces[3],1250,2500);
    pg.save ("/Users/mikemcsharry/Desktop/pgraphics/pgraphics/timedphotos/" + imageout);
    //save ("/Users/mikemcsharry/Desktop/pgraphics/pgraphics/timedphotos/" + imageout);
  }
  //that was end of setup
  //setup read in all the strings
}

koogs

Edit post, highlight code, press Ctrl-o to format

Leave a blank line between the text and the code.

mikemcsharry

oops - sorry about that.

koogs

ok, i don't have the images or the csv file or the font... so this is an example

// skull from here, copied to /tmp/skull.jpg: 
// i.pinimg.com/736x/db/06/95/db0695cce0afab7733e333bfe56a8431--skull-real-human-skull-photography.jpg

// needs to be full path because we don't call setup
String IMAGE = "/tmp/skull.jpg";

PImage img;
PFont myFont = createFont("Courier", 120); // your font here

img = loadImage(IMAGE);
println(img.width, img.height);

// pgraphics using image size (rotated)
PGraphics pg = createGraphics(img.height, img.width);

pg.beginDraw();

// rotate the image (around 0, 0), translate back to visible area
pg.pushMatrix();
pg.translate(0, img.width); 
pg.rotate(radians(270));
pg.image(img, 0, 0);
pg.popMatrix();

// draw text
pg.textFont(myFont);
pg.text("I SEEN", 100, 100);
pg.text("A SKULL", 100, 220);
pg.endDraw();

// save the output
pg.save ("/tmp/output.jpg");

basically, everything you need to draw your image needs to be applied to the pgraphics.

mikemcsharry

Thank you loads for this help - I'll tidy up my work and get this working. I'll post back my finished work and a copy of the csv and hopefully it will help someone else

mikemcsharry

Many thanks everyone heres the file I created - makes new images approx. one per second

// pgraphics test
// read in a csv file with user filed data. Images mixed sizes.
// all images portrait (tall)
//sample line from csv 
// 274desford,40.56,321 (image name, chip time, position)
// add text from csv file then write the image back
//images stored in photosin output to timedphotos

String[] lines;
int recordCount;
PFont body;
PImage img; 
String showfile;
String imageout;
String textout;
String runnerno;
String chiptime;
int imagew;
int imageh;

void setup() {
  PFont pbody = loadFont("GothicNo13BT-Regular-48.vlw");
  //textFont(body, 96);

  noLoop();

  lines = loadStrings("pgraphics.csv");
  for (int i = 0; i < lines.length; i++) {
    String[] pieces = split(lines[i], ',' ); // Load data into array
//   println (pieces [1]);
//   println (showfile);
    showfile = "/Users/mikemcsharry/desktop/pgraphics/pgraphics/photosin/" + pieces[0] + ".jpg";

    textout = pieces[1];
    imageout = pieces[0] + ".jpg";
    runnerno = pieces[2];

    img = loadImage(showfile);
//    println (img.width);
//   println (img.height);
    imagew = (img.width);

    imageh = (img.height);
    PGraphics pg=createGraphics(imagew, imageh);

    pg.beginDraw();
    pg.pushMatrix();
    //pg.translate(0, imagew); note this not needed
    //pg.rotate(radians(270)); note this not needed
    pg.image(img, 0, 0);
    pg.popMatrix();

   pg.textFont(pbody,96);
   pg.text("Desford 5 2018",100,1850);
   pg.text(pieces[1], 100, 1950);
   pg.text(pieces[2], 100, 2050);

    pg.endDraw();
    pg.save ("/Users/mikemcsharry/Desktop/pgraphics/pgraphics/timedphotos/" + imageout);
    //save ("/Users/mikemcsharry/Desktop/pgraphics/pgraphics/timedphotos/" + imageout);
  //that was end of setup
  } 
}