Convert event callback using `this` to promise carrying context

Question

I'm using exif-js to extract EXIF information from camera/photo gallery images in a Ionic 3 app. I used to catch the onload event and retrieve the EXIF info in a callback and now I want to change the behaviour by using promises but I can't make it work because the function retrieving the EXIF info uses this and I don't understand how to make that accessible to the Promise context.

Here is my old code:

public getImageEXIF(imagePath) {
    let imageR = new Image();
    imageR.onload = function () {
      exif.getData(imageR, function () {
        const allMetaData = exif.getAllTags(this);
      });
    };
    imageR.src = imagePath;
  }

The offending line is const allMetaData = exif.getAllTags(this); where this contains a copy of the image enriched with EXIF data.

This is how I converted the function to be async:

 public waitImageLoad(imagePath): Promise<any> {
    return new Promise((resolve) => {
      let photo = new Image();
      photo.onload = () => resolve(photo)
      photo.src = imagePath;
    });
  }

public getImageEXIFAsync(imagePath) {
    this.waitImageLoad(imagePath).then((photo) => {
      exif.getData(photo, () => {
        // Here `this` points to the class to which `getImageEXIFAsync` belongs to
        const allMetaData = exif.getAllTags(this);
        console.log(lat, long);

        if (lat && long) {
          return { latitude: lat, longitude: long }
        } else {
          return null
        }
      })
    })
  }

I've tried several things, including passing resolve to getData with different arguments (this, photo...) without success.

How do I carry getDatacontext over to the promise so thatgetImageEXIFAsync` returns the EXIF data?

in the function as callback this referes to what ? maybe you can decalare a baribale something like let _this = `objectYouWant`, and then pass _this to getAllTags method — Ganesh Karewad, Nov 23 '18 at 12:22

score 0 · Answer 1 · answered Nov 23 '18 at 11:59

0

What you are looking for is call, apply and bind.

You can find some explanation here

What you want to do is:

exif.getData([YOUR CODE HERE]).call(exif)

answered Nov 23 '18 at 11:59

Rafael de Freitas

411
4
11

Convert event callback using `this` to promise carrying context

1 Answers1