Comments (29)
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
from nativescript-imagepicker.
+1
from nativescript-imagepicker.
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
from nativescript-imagepicker.
@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.
from nativescript-imagepicker.
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.
from nativescript-imagepicker.
+1
from nativescript-imagepicker.
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.
from nativescript-imagepicker.
@xerotolerant Can you share the plugin? is there a demo by any chance?
Thanks!
from nativescript-imagepicker.
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
from nativescript-imagepicker.
Thank you @xerotolerant !
from nativescript-imagepicker.
+1 here...
Is this plugin being maintained???
from nativescript-imagepicker.
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.
from nativescript-imagepicker.
Well there's this orientation issue. I'd prefer to solve it w/o adding another plugin.
from nativescript-imagepicker.
@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">
from nativescript-imagepicker.
from nativescript-imagepicker.
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.
from nativescript-imagepicker.
@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.
from nativescript-imagepicker.
Any fix for this ?
from nativescript-imagepicker.
+1
from nativescript-imagepicker.
+1
from nativescript-imagepicker.
+1 really need this to be fixed
from nativescript-imagepicker.
Hi! It would be fantastic if you could solve this error, we use this plugin very often and it is really very useful. Thanks!
from nativescript-imagepicker.
+1
from nativescript-imagepicker.
Hi guys,
There are few possible reasons for getting images with a wrong orientation:
- Something related to the way you pass the images to the ImageView.
- 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.
from nativescript-imagepicker.
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>
from nativescript-imagepicker.
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);
}
})
}
from nativescript-imagepicker.
I see there's a new version of this plugin (5.0.0), was this bug fixed?
from nativescript-imagepicker.
@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.
from nativescript-imagepicker.
@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?
from nativescript-imagepicker.
Related Issues (20)
- No reliable way to determine selected media's type HOT 5
- Error on multiple number of picking Calling js method onStart failed
- I can only select files from the Screenshots and Camera directories
- iOS src is empty HOT 9
- Imagepicker do not take 100% height HOT 1
- [android]error not easy to "filter" HOT 1
- Can ImagePicker be used to select videos from camera roll? If not, any suggestions? HOT 2
- Feature request: Better errors
- [IOS]multiple dependencies with different sources for `QBImagePickerController` issue when install with @nstudio/nativescript-camera-plus HOT 1
- How can i select directly from Gallery rather than downloads
- Plugin translation
- [android] No path for returned image(s) HOT 1
- JS: TypeError: Cannot read property 'startActivityForResult' of undefined
- Class constructor Observable cannot be invoked without 'new' Nativescript 7.0.0 HOT 3
- IOS on dismiss picker canceled error is not fired
- Plug-in does not work in NativeScript 8 HOT 2
- Android: How to get file extension of images selected using @nativescript/imagepicker HOT 1
- What is the migration guide from NS-6 to NS-8 for nativescript-imagepicker?
- "fromAsset() is deprecated. Use ImageSource.fromAsset()" while using ImageSource.fromAsset()
- [Image Picker] Images in iPhone Library not visible
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nativescript-imagepicker.