Find image dimensions when loading image

edited March 2018 in How To...

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!!

Tagged:

Answers

  • Answer ✓

    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 );
    
  • Brilliant - how did I miss that and thank you. I've just found exiftool which may also come in handy for another task

  • edited April 2018

    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];
    
      //  }
      //}
    
  • 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

  • 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)

  • 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.

  • 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

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

  • 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

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

  • edited April 2018

    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 :)

  • edited April 2018

    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..

  • 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.

  • edited April 2018 Answer ✓

    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.

  • 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)

  • edited April 2018

    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)

  • 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 :)

  • 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...

  • edited April 2018

    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
    }
    
  • Edit post, highlight code, press Ctrl-o to format

    Leave a blank line between the text and the code.

  • oops - sorry about that.

  • Answer ✓

    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.

  • 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

  • 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
      } 
    }
    
Sign In or Register to comment.