Pictures selected have wrong orientation about nativescript-imagepicker

[GrEg00z]

I can confirm that the solution given by @vagabond92 worked for me !!

Just need to add this line in 'imagepicker.android.js' (like explain in @vagabond92 previous post) :
image.setRotationAngleFromFile(SelectedAsset._calculateFileUri(uri));

This will add the 'rotationAngle' property to the imageSource getted from selection result of this plugin.

From memory, the following template code given by @vagabond92 didn't works for me

<Image [src]="fileUri" [rotate]="imageSource.rotationAngle">

So instead I use this code (in my composant ts file) ;

if(isAndroid && imageSource.rotationAngle != 0) {
      let mat = new android.graphics.Matrix();
      mat.postRotate(imageSource.rotationAngle);
      let bm = android.graphics.Bitmap.createBitmap(imageSource.android, 0, 0, imageSource.android.getWidth(), imageSource.android.getHeight(), mat, true)
      imageSource = ImageSourceModule.fromNativeSource(bm);
    }

And then the imageSource have the good orientation !

PS : need the tns-platform-declarations plugin to make it work

[mariano-aguero]

+1

[mariano-aguero]

Meanwhile you can use the following repository with the applied fix
https://github.com/mariano-aguero/nativescript-imagepicker-ktp

To install it:
npm install https://github.com/mariano-aguero/nativescript-imagepicker-ktp.git --save

[zbranzov]

@gabitoesmiapodo The bug is fixed in tns-core-modules: "next" version and should work fine with the current version of the imagepicker plugin. The combination of the two modules versions should resolve the issue.

[tbozhikov]

Hi guys, the latest version of tns-core-modules fixes this issue. I am closing it now, feel free to reopen it if you have further problems.

[Daxito]

+1

[xerotolerant]

Hey I ended up using an image cropper plugin in order to allow the user the choose the correct orientation and size. You would probably have to use an image cropper if you intend to use the image within the application anyway since the images stored on the device are probably enormous.

[Daxito]

@xerotolerant Can you share the plugin? is there a demo by any chance?
Thanks!

[xerotolerant]

I think it was this one.
https://github.com/bthurlow/nativescript-imagecropper

I am not 100% sure though. It was a long time ago and I have since moved away from nativescript.

but basically after you choose the image and the promise returns the image. In your success function immidiately invoke the image cropper. Once the user uses it it returns the cropped image at the size it appears on screen (or a size you choose). A 4MB 12MP photo would then become an 800x600 4xxKB image so you can upload it or whatever from there.

I remember running out of memory after loading a few images directly from storage simply because it was too large

[Daxito]

Thank you @xerotolerant !

[erjdriver]

+1 here...

Is this plugin being maintained???

[xerotolerant]

It doesn't seem to be but I haven't encountered any problems with it. I remember being skeptical because of how long it was since the last commit. However I really had no choice. So far it hasn't let me down.

[erjdriver]

Well there's this orientation issue. I'd prefer to solve it w/o adding another plugin.

[vagabond92]

@i have only encountered this problem on Android. I obtained a hacky fix by adding:

    image.setRotationAngleFromFile(this._calculateFileUri(uri));

immediately before:

    return image; 

in the decodeUri function in viewmodel.android.ts

Then I can obtain the rotation angle from the imagesource obtained from .getImage(), and bind that to:

<Image [src]="fileUri" [rotate]="imageSource.rotationAngle">

[xerotolerant]

I don't remember myself but it might have been on android too. On a related note, have you ever run out of memory after using multiple images directly?

…

Sent from my iPhone

On 20 Jan 2017, at 10:05 PM, Jason K. Ellis ***@***.***> wrote: I have only encountered this problem on Android. I obtained a hacky fix by adding: image.setRotationAngleFromFile(this._calculateFileUri(uri)); immediately before: return image; in the decodeUri function. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[vagabond92]

Yes, I have. That's what led me to tracking down this problem. I noticed the image rotation problem on Android, and sought to remedy it by instantiating imageSource.fromFile(filename).rotationAngle. Naturally, this led to OOM error when loading a list of images because they weren't being garbage collected. I found that by employing this fix and extracting the rotation angle when choosing the image, then storing it, the imagesource instance would be garbage collected.

[vagabond92]

@tsonevn Is it possible to make it so that the imageSource that is returned from SelectedAsset.getImage() contains the rotation angle if the image is located on the android device?

I've done some testing, and it is clear that the rotation angle is not defined for images without a fileUri (located on Google Drive for example). In a previous version of imagepicker, there was an internal function in viewmodel.android.ts: image.setRotationAngleFromFile(this._calculateFileUri(uri));
which seems to have gone away in this version.

[OPADA-Eng]

Any fix for this ?

[abhayastudios]

+1

[CodeObia]

+1

[GrEg00z]

+1 really need this to be fixed

[dariogum]

Hi! It would be fantastic if you could solve this error, we use this plugin very often and it is really very useful. Thanks!

[gabitoesmiapodo]

+1

[DimitarTachev]

Hi guys,

There are few possible reasons for getting images with a wrong orientation:

1. Something related to the way you pass the images to the ImageView.
2. The images are produced by an old version of the camera plugin (there was an issue with the orientation there).

Could you share some code snippets with the way you pass the images from the Image Picker to the Image View?

We also made a lot of improvements in the images processing. You could track their status in the following pull requests:
NativeScript/NativeScript#5110
NativeScript/tns-core-modules-widgets#109
and check if your orientation issues are still reproducible when we release these fixes.

[vtjon]

I am still seeing this issue with NS 3.4 and Image Picker 4.0.1. Here is my call:

openPicker() {
    let context = imagepicker.create({ mode: "single", newestFirst: true });
    context
      .authorize()
      .then(() => {
        return context.present();
      })
      .then(img => {
        if (img && img.length > 0) {
          img[0]
            .getImage({
              maxWidth: 250,
              maxHeight: 250
            })
            .then(source => {
              this.profileImage.nativeElement.src = source;
              this.hasProfileImage = true;
            });
        }
      })
      .catch(err => {
        dialogs.alert("We were unable to open your gallery. Please try again.");
        console.log(err.message);
      });
  }

profileImage looks like:

<Image #profileImage id="profileImage" [ngClass]="{'profile-image':hasProfileImage}"></Image>

[mariano-aguero]

Example of code working using the forked branch:

  import * as imagepicker from 'nativescript-imagepicker';
    const imageSourceModule = require("image-source");
    import { ImageSource } from 'tns-core-modules/image-source';
    import { isAndroid } from 'platform';

   // Declaration of component and more code...

    public galleryTakePhoto(i): any {
        return new Promise((resolve, reject) => {
            try {
                let context = imagepicker.create({
                    mode: "single",
                });

                context.authorize().then(() => {
                    return context.present();
                }).then((images) => {
                    let image = images[0];
                    return image.getImage().then((source) => {

                        // Fix rotation image
                        if(isAndroid && source.rotationAngle != 0) {
                            let mat = new android.graphics.Matrix();
                            mat.postRotate(source.rotationAngle);
                            let bm = android.graphics.Bitmap.createBitmap(source.android, 0, 0, source.android.getWidth(), source.android.getHeight(), mat, true);
                            source = imageSourceModule.fromNativeSource(bm);
                        }
// Do something with source
                    }).catch((err) => {
                        reject(err);
                    })

                }).catch((err) => {

                    reject(err);

                });
            } catch (err) {
                reject(err);
            }
        })
    }

[gabitoesmiapodo]

I see there's a new version of this plugin (5.0.0), was this bug fixed?

[DimitarTachev]

@gabitoesmiapodo, the fixes in the above-mentioned pull requests are part of the NativeScript Core Modules (not in this plugin) and they are currently available in the next version of the package. You could try using tns-core-modules: "next" till its officially released.

[gabitoesmiapodo]

@DimitarTachev sorry, but I don't understand.

Is this particular bug, for this plugin, fixed? Was it somehow fixed in tns-core-modules and not in nativescript-imagepicker?