Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    getting exif from a jpg on canvas on a page that does not reload

    Ill try and keep this to the point. I just need to say that im far from a professional coder, all i do is dabble to pass time on dead nights.
    I have a sort of picture gallery im working on and i would like to display exif data when a picture gets enlarged.
    simple enough with php and shell commands or perl but this page
    (www.alleycat.be) is written like an animation on canvas
    (i intend to use more subroutines to put different 'apps' later on the same page without the need to reload)
    the routine to render the pictures or picture on canvas is called every x milliseconds with
    Code:
    setInterval("renderit()",500);//draw everything on the page
    depending on a variable 'drawmode' it either renders a set of thumbnails or an enlarged picture depending on what part (thumbnail) on the canvas was clicked
    this way if i add more drawmodes i can have other (animated or not) applications render all on the same page without the need to reload
    it does load the pictures as needed ofcourse theres too many of them

    the part of the routine where i want to display some bits of EXIF-data is
    Code:
    if(drawmode==hudgepic && infopop==off){
    	
    	var imageObj = new Image();
    	
          imageObj.onload = function() {
          ctx.fillStyle = "#EAEAEA";
          ctx.fillRect(0,0,640,640);
          
     
          X_offset = (640-imageObj.width)/2;
          Y_offset = (640-imageObj.height)/2;
          ctx.drawImage(imageObj,X_offset,Y_offset);
          
          }
     
          $dispicurl="pics/fppics/" + dispic + ".jpg";
          imageObj.src = $dispicurl;
          //php gets parsed before the page is sent to the browser, right ?
          //have to find this in javascript then
          //$exif_data = exif_read_data($dispicurl, 0, true )
    	}
    the variable dispic gets its content when i click a thumbnail in the other drawmode

    now ive been searching to and fro and found a few solutions and libraries, i could also have all the data extracted serverside with a script but i'd like to extract it clientside on the fly if possible. The javascript img object doesnt seem to support it and the only way i found is a lengthy dissertation from flickr describing how to cut off the first 128 bytes and then virtually disassemble it into readable text
    all other i found use a custom exif=true from a html img tag
    which i dont have here so
    im stuck
    or im missing something i cant see, like i said im far from a pro
    if anyone could give a pointer here in somewhat human language id be much obliged
    thanks in advance

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    you need to create an exif data API using php, then you can talk to that php code from javascript using ajax.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #3
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rnd me View Post
    you need to create an exif data API using php, then you can talk to that php code from javascript using ajax.
    okay i could just have a php script generate a flatfile parsing the whole directory -> to a file containing an array with all data i can include in the index page with php but that would get me 700 extra lines every time the page comes down

    i think i can manage a php script that just gets it one by one, this means the client has to connect twice, right (help me out here im really not an expert) ?
    once to load the picture and once to address the php script (api) every time a picture gets clicked
    i was just wondering if since the pic is already loaded it wasnt possible to extract the data locally without having to completely cut and disassemble the whole file (i hope im making sense im not used to the jargon)

  • #4
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i cant find the edit button, seriously sorry for posting twice in a row, what i meant in my reply was if it has to connect once to load the picture from the server and once to adress the php script that gives the exif data this will increase load time, maybe seriously on a connection with a lot of hops in between. Im not quite clear on the hardbone workings of this, maybe it doesnt need to actually re-connect if it addresses the same server twice immediately in a row ?
    anyways i think as far as i can google and with what you say the api and ajax might be the best shot, thanks

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    well, you have to get the info to the user's screen at some point. you CAN sometimes get exif info from javascript, but that would require you to load the image a second time anyway using binary ajax to grab the file data. this would likely be slower for the user than grabbing a small amount of meta info as JSON from a php script. Doing them all at once is cool too, but cache the results to a "flat file" so that you don't have to re-scan each image each time.

    personally, i would go with the one-at-a-time php script. you essentially create a simple page that shows JSON meta data about a specific image that you name in the queryString of the "page's" url, maybe something like "/imagemeta.php?file=123.jpg". you then fetch that url from ajax, parse the JSON, and display the data on the page in a meaningful way.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •