How to get exif tags from a picture

Ionic Framework ionic-v3
1

Hello! I’m trying to take or get a picture from library and get the picture’s exif tags. Has anyone done that? I only tried with exif-js, but when I call

EXIF.getData(picture, function(data){ console.log(data); })

the console shows anything (like if the function never get to the console.log method).

Sorry for my English!

1 Like
2

I just got this to work. Hopefully this will get you headed in the right direction.

After doing the npm install, I added this at the top of my component…

import * as exif from 'exif-js';

Then I added this function…

loaded(e) {
    exif.getData(e.target, function() {
        console.log(e.target);
        var allMetaData = exif.getAllTags(this);
        console.log(allMetaData);
    });
}

Then in the HTML, I bound that function to the loaded event, like this…

  <img [src]="image" (click)="clickImage(image)" (load)="loaded($event)">

Good luck!

1 Like
3

I can verify that the above method works.

loaded(e) {
exif.getData(e.target, function() {
console.log(e.target);
var allMetaData = exif.getAllTags(this);
console.log(allMetaData);

});

}

The only problem is…I have the problem to expose allMetaData outside of the exif.getData . Like for example if I want to show var allMetadata on html, it somehow doesn’t display anything

something about typescript and JS variable that i need to keep in mind of…any ideas

4

You’re challenging my memory here. I had to go look up how I really use this in a production app. I wrap the exif call in a promise and call that function from my event handler, binding the return value to a class-level variable. This snippet from my class definition should get you closer to what you need.

   metaData: any; // Should probably create an interface or something.

    async loaded(e) {
        this.metaData = await this.getGpsData(e.target);
    }

    getGpsData(image): Promise<any> {
        return new Promise((resolve, reject) => {
            exif.getData(image, function () {
                var allMetaData = exif.getAllTags(this);
                console.log(allMetaData);
                resolve(allMetaData);
            });
        });
    }

Then use the same HTML from before.

  <img [src]="image" (click)="clickImage(image)" (load)="loaded($event)">
1 Like
5

Thanks WalkingRiver. It does work very well. I feel like this need to be shared to more folks so that people that want to implement exif parse in ionic 3 can refer to this

6

I have problems with this.

7

What problems are you having?

8

I can’t get the original date of a photo from my gallery or a captured photo, you can help me?

9

Hi. Basically you won’t get that information using the exif thing because by the time you get hold of the image from cordova all that data is gone.

Instead you need to ask the API for it.

I’m putting together a little repo for you which has an example of getting said data. Watch this space.

1 Like
10

oh ok, thank you, what api?

11

Hi,

Apologies that took a while. Had an insane week.

Hopefully that’ll get you somewhere near where you need to be.

Good luck

12

I have used "cordova-plugin-camera-with-exif": "^1.2.4", to pick images from the cameraroll with Exif data attached. The problem with exif-js is that the cordova-plugin-camera strips all the good stuff from Exif and only returns a JPEG with handful of values.

13

Interesting. Didn’t know about that plugin.

Cheers

14

Have another look at my repo - as per mixuala’s advice - the repo now uses the cordova-plugin-camera-with-exif

1 Like
15

Try using piexifjs to read and get the Exif data. Although the plugin itself is kinda memory intensive. Hope it helps.

16

thanks, I have problems to install that plugin, previously I had installed the camera plugin without exif

17

Hi. I will have runtime error when I try this error. I try adding this as the provider it will get cant resolve all parameters for EXIF. Is there anything I missed? Thanks.

18

Hello @Judgewest2000,
Thanks for your solution but unfortunately I am unable to get results.

I used your method but got below error

ERROR Error: Uncaught (in promise): SyntaxError: Unexpected token / in JSON at position 0

Can you please let me know what I did wrong?

Thanks