none
Access Image Metadata - Description RRS feed

  • Question

  • I want to use HTML5/JavaScript(Internet Explorer 11) to read a .png files metadata, specifically the description field.

    Right now I got it so that the user can drag an image to the browser and it will display it, and then it has a place to show the description and everything as well, but I don't know how to get the description from the file.

    All the code should be so that it's all processed client-side, which is why I am trying to use JS only.  Upon the initial loading of the webpage, they shouldn't need access to the internet anymore.  Which also makes it so I can use an AppCache Manifest file to allow them to load the webpage and use it offline for future use after the 1st time as well.

    Does anyone know how I might go about doing this?

    Sunday, April 27, 2014 5:41 PM

Answers

  • Hi Michael,

    We can use HTML5 API:FileReader to read png metadata from it's chunk data area.

    Here is the PNG header structure for your reference:

    I also made a simple PNG reader webpage here: http://jsbin.com/saxudoro/1

    More details can be found at PNG chunk specification document: http://www.libpng.org/pub/png/spec/1.2/PNG-Chunks.html

    Best regards,

    Sheng Jiang | Support Engineer

    Global Business Support | Microsoft Corporation


    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.

    • Marked as answer by Maya Key Friday, May 2, 2014 4:46 AM
    Tuesday, April 29, 2014 6:16 AM
  • Hi Michael,

    So far as I know, FileReader API cannot read the file from <img src="filename.png"/>.

    However, it can read file from AJAX request which means the file you are trying to read should be in the same domain.

    Here is a sample for your reference: http://www.nihilogic.dk/labs/imageinfo/, it reads image metadata from AJAX request.

    Best regards,

    Sheng Jiang | Support Engineer

    Global Business Support | Microsoft Corporation


    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.

    • Marked as answer by Maya Key Friday, May 2, 2014 4:46 AM
    Friday, May 2, 2014 2:50 AM

All replies

  • Hi Michael,

    I am trying to involve someone familiar with this issue to come into this thread. Thank you for your understanding.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, April 28, 2014 8:41 AM
    Moderator
  • When you say "Description" what exactly do you mean? The PNG specification defines a "comment" field-- is that what you're talking about?

    Using the HTML5 File API, you can access the raw byte stream of the image as a set of bytes (UInt8). See e.g. http://stackoverflow.com/questions/3146483/html5-file-api-read-as-text-and-binary

    You then would need to write a PNG chunk decoder (it's probably a few dozen lines) to parse the bytestream into PNG's chunks, then find any of the "comment" chunks (Chunk types: iTXt, zTXt, tEXt) and decode/display the text from those.

    Monday, April 28, 2014 6:34 PM
  • I'm pretty sure it's a zTXt that I need to extract from the image...I am looking at chunk decoder now and seeing if I can figure this stuff out, I saw it somewhere else, but nothing about how the chunk decoder thing actually functions to be able to build it myself...

    I will be looking at the link to see if I can figure this stuff out, although I already know how to use HTML5 alongside the file and access the bytestream, and even display said data...the raw bytes though doesn't make it obvious where the text is in the file I'm accessing.

    Monday, April 28, 2014 6:43 PM
  • Hi Michael,

    We can use HTML5 API:FileReader to read png metadata from it's chunk data area.

    Here is the PNG header structure for your reference:

    I also made a simple PNG reader webpage here: http://jsbin.com/saxudoro/1

    More details can be found at PNG chunk specification document: http://www.libpng.org/pub/png/spec/1.2/PNG-Chunks.html

    Best regards,

    Sheng Jiang | Support Engineer

    Global Business Support | Microsoft Corporation


    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.

    • Marked as answer by Maya Key Friday, May 2, 2014 4:46 AM
    Tuesday, April 29, 2014 6:16 AM
  • Using your helpful webpage and looking at the code, I am nearly done with making it read all the png files successfully.

    Most of what I needed were in the IHDR chunk, such as width and height, as well as another chunk I had to get to, which was the zTxt chunk.

    Since chunks can be in any order and there can be multiple chunks in the same file I am basically skipping over chunks I don't need...however I made the mistake of hard coding the location in bytes which only works if you know the order of the chunks and where it'll be, however some of my files had a few chunks I don't care to read before the zTxt chunk, so I am going to have to code it so it looks at the length of those chunks and is able to skip over them.

    It's no longer a big deal though since I can see how you did what you did already, I should have it done by tomorrow reading the zTxt of all my files.

    ***1 question is though, let's say I am using <img src="filename.png"> for example...using it to display on my webpage...rather than having the zTxt stored in another file, or processed in some way by the server is there a way to pass that file as the file to be processed?  This would mostly be used as an example of how it would work, if they want to see what information they will get before they try it with their own files.

    Thursday, May 1, 2014 3:23 PM
  • Hi Michael,

    So far as I know, FileReader API cannot read the file from <img src="filename.png"/>.

    However, it can read file from AJAX request which means the file you are trying to read should be in the same domain.

    Here is a sample for your reference: http://www.nihilogic.dk/labs/imageinfo/, it reads image metadata from AJAX request.

    Best regards,

    Sheng Jiang | Support Engineer

    Global Business Support | Microsoft Corporation


    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.

    • Marked as answer by Maya Key Friday, May 2, 2014 4:46 AM
    Friday, May 2, 2014 2:50 AM