0

So here is a little context to this question. I am currently building an app in Ionic v4 and in it I am creating a custom image viewer (more like an entire gallery). I am using the native File plugin to get all image file paths and then show them in a grid view. But the problem was that the images were too big to load efficiently and I had to somehow reduce the size and compress them, so I came up with this code

 compress(image, callback) {
    const width = 500;
    const height = 300;
    const img = new Image();
    img.src = image;
    img.onload = () => {
        const elem = document.createElement('canvas');
        elem.width = width;
        elem.height = height;
        const ctx = elem.getContext('2d');
        ctx.drawImage(img, 0, 0, width, height);
        ctx.canvas.toBlob((blob) => {
            // console.log(
            //     URL.createObjectURL(blob)
            // );
            callback(URL.createObjectURL(blob));
        }, 'image/jpeg', 1);
    };
}

It gives me a smaller image that loads super fast but the orientation is lost and the pics are either left or right rotated. I learned about EXIF data and then literally tried to use all the exif plugins I could find on npm and none of them seem to work. This is my system info

Ionic:

   Ionic CLI                     : 5.4.9 (C:\Users\tooth\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.11.4
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.1

Cordova:

   Cordova CLI       : 9.0.0
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 6 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.9

System:

   Android SDK Tools : 26.1.1 (C:\Users\tooth\AppData\Local\Android\Sdk)
   NodeJS            : v10.14.1 (C:\Program Files\nodejs\node.exe)
   npm               : 6.4.1
   OS                : Windows 10

A list of plugins I have tried,

  • exif-js
  • fast-exif
  • jpeg-autorotate
  • jpeg-exif
  • ng-pica
  • ng7-pica

I am open to any solutions and any other methods of achieving the desired result.

Hassan Ali
  • 1
  • 3
  • Hey Hassan so which plugins you tried that failed? exif-js? what specifically failed for you? – Sergey Rudenko Dec 05 '19 at 16:47
  • @SergeyRudenko Just updated the questions with the list of plugins. What failed me in these were that exif-js just doesnt do anything. the getData function never invokes. Others made the app stop working for some reason. Some had the 'fs' module not found error – Hassan Ali Dec 05 '19 at 18:55
  • Can you add your code for exif-js implementation to this question? this will make it practical – Sergey Rudenko Dec 05 '19 at 20:15

0 Answers0