CODEWITHSUNDEEP
javascriptangular
James J
James J

Reputation: 21

Read Image EXIF Data in Angular 6

I need to read EXIF data of an image. More importantly, I need to find orientation information about an image that is loading from a remote service for instance https://storage.googleapis.com/my-app-images/xxx.jpg

I tried to use EXIF-JS library but couldn't figure out why was it not working in angular 6.

Upvotes: 1

Views: 8875

Answers (3)

Vivek Chaturvedi
Vivek Chaturvedi

Reputation: 540

Hi @Ivan just got worked in angular 7 application. Below is small change in your answer -

Instead of including script tag in index.html I have used 

npm install exif-js --save

and in module file of component use it as a provider.

Upvotes: -1

Ivan Mihaylov
Ivan Mihaylov

Reputation: 433

In my Angular 6 app I added

  <script src="https://cdn.jsdelivr.net/npm/exif-js"></script>

to my index.html

Inside the component i needed exif I import it on top -> const EXIF = require('exif-js');

and then use the standard function:

getExif(result) {
    console.log(result);
    EXIF.getData(result, function() {
        const make = EXIF.getTag(this, 'Make');
        const model = EXIF.getTag(this, 'Model');
        const orientation = EXIF.getTag(this, 'Orientation');
        const makeAndModel = document.getElementById('makeAndModel');
        console.log(make, model, orientation);
    });
}

Upvotes: 3

Bardr
Bardr

Reputation: 2559

I created a snippet for you https://stackblitz.com/edit/angular-exifjs-example Image is provided using base64 string because as far as I know, Stackblitz doesn't support assets in Angular projects. Also, notice that exif-js is included with script tag in index.html using CDN. In your project you could use local file if you want to.

Upvotes: 2

Related Questions