expo-image-picker android doesn't have a select button - android

I am using react native and expo and the expo-image-picker is working great on iOs and mostly great on android with one exception. There is no "okay" or "select" or "done" button when a user pulls a picture from gallery.
The user has to click the crop button to accept the image. Is this typical? I feel like this will be confusing and a bad user experience...
const chooseImage = async (useCamera, index) => {
if (!(await checkPermission(useCamera))) {
Alert.alert(
"Permission missing.",
"Camera permission is required to take image."
);
return;
}
const method = useCamera ? "launchCameraAsync" : "launchImageLibraryAsync";
const result = await ImagePicker[method]({
allowsEditing: true,
base64: false,
aspect: [3, 4],
});
if (!result.cancelled) {
// upload image and retrieve image url
const {height, width, type, uri} = result;
profile.images[index] = uri;
if (uri != null) {
setProfile(profile);
}
setChangedValue("images");
}
};
UPDATE
Found that I can select the photo if I remove editing ability allowsEditing. But I want the user to be able to edit so I am curious why editing doesn't have an "okay" button on it?

I found that the crop button is the "done" button.
There is no other way to implement the selection of the image, so this is just a design aspect of the image picker.

Related

How to store pdf , word and other docs in flutter app?

I am making a Document Saver app like if i pick a document from my device using file picker and show picked docs using listview its fine.But whenever i reopen the app they are gone.How to keep those docs permanently into my flutter app ?
Here is a short GetFile Function to pick pdf, how to save this picked pdf into app itself?
Future<void> GetFile() async {
picked = true;
result = await FilePicker.platform.pickFiles(
withReadStream: true,
allowMultiple: true,
type: FileType.custom,
allowedExtensions: ['pdf']);
if (result == null) return;
setState(() {
files.addAll(result!.files);
});
}

How to get the thumbnail of an Android gallery picture, in NativeScript?

I understand that Android automatically creates a thumbnail, for every picture taken by the camera. I need to be able to display that thumbnail.
I'm using nativescript-imagepicker plugin to select images. The plugin returns only the size and src of the selected image(s), for instance:
'/storage/emulated/0/DCIM/DSCF2060.jpg'
How could i use this src, to retrieve the corresponding thumbnail(is it even possible?).
The Android API is very confusing for me(not to mention the Java), so any help will be greatly appreciated.
Use ThumbnailUtils
export function onGetImageButtonTap(args) {
let context = imagepicker.create({
mode: "single"
});
context
.authorize()
.then(function () {
return context.present();
})
.then(function (selection) {
selection.forEach(function (selected) {
const size = layout.toDevicePixels(96);
const bitmap = android.media.ThumbnailUtils.extractThumbnail(android.graphics.BitmapFactory.decodeFile(selected.android),
size, size);
args.object.page.getViewById("thumbnailImg").src = fromNativeSource(bitmap);
});
}).catch(function (e) {
console.log(e)
});
}
Playground Sample

How to add comments to images using xamarin

I am using xamarin forms and build sample app. The app has few fields and take image function. When user take an image, the image get saved in phone gallery and get renamed to data from fields.
I have a notes field. In notes field user can enter some text and characters. I don't want to include data from note fields to rename image.
What I want is to get the user input from notes field and save in image comments. (Please see image below).
image comment
My first question is it possible to do that. So user fill some fields, take picture, and whatever user type in notes field; it can get saved in imagedetails->comments.
This is code to save image and rename to some data input fields.
I am using jamesmontemagno/MediaPlugin plugin to take images.
https://github.com/jamesmontemagno/MediaPlugin
private async void Take_Photo_Button_Clicked(object sender, EventArgs e)
{
await CrossMedia.Current.Initialize();
if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported)
{
await DisplayAlert("No Camera", ":( No camera available.", "OK");
return;
}
var file = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions
{
SaveToAlbum = true,
//Directory = "Sample",
Name = jobnoentry.Text + "-" + Applicationletter + "-" + signnoentry.Text + "-" + Phototypeentry,
});
if (file == null)
return;
MainImage.Source = ImageSource.FromStream(() =>
{
var stream = file.GetStream();
return stream;
});
You can see I assign Name of image to some data fields. But how i can add notes to annotate the image and have them in image comments.
Hope you all understand my question.
It's not clear what file type is the image being stored as. Is it a .png? a .jpeg? The library's example seems to indicate it stores JPEG files.
If that's the case, look into editing EXIF data. i.e. https://developer.xamarin.com/api/type/Android.Media.ExifInterface/

How to show the last captured image from the camera without code in Image view

I am new to the Titanium Android Mobile application development.
My problem is how do i load the last captured image of camera in an image view.
I have a bitton called as click in one window and I have to display that image in second window.
How will I achieve this , remebr no code is needed only using the Titanium android.
Thanks
Try this code...
Ti.Media.showCamera({
success : function(event) {
if (event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) {
// Here you can do whatever you want with the image captured from the camera
var imgView = Ti.UI.CreateImageView({
image: event.media,
width: Ti.UI.SIZE, height: Ti.UI.SIZE
});
Ti.UI.currentWindow.add(imgView); // It will be added to the centre of the window if you didn't specify top or left or ...
} else {
alert("got the wrong type back =" + event.mediaType);
}
},
cancel : function() {
alert("You have cancelled !");
},
error : function(error) {
alert("error");
},
saveToPhotoGallery : true,
allowEditing : true,
mediaTypes : [Ti.Media.MEDIA_TYPE_PHOTO]
});
You will receive the captured image data via a method of the Callback interface.
Callback interface is used to supply image data from a photo capture.
Camera.PictureCallback
onPictureTaken(byte[] data, Camera camera)
{
......
Your code
......
}
You can do whatever you want to do with image data here. Means you can set the image to imageview here. You will receive data in bytes. Simply convert it to drawable/bitmap and set that drawable/bitmap to the imageview. Thats it!
For converting bytes to bitmap you can use this link :
How to convert byte array to Bitmap
Thanks for all the response ...
I have solved this my own.
var image = event.media;
then capture the native path for the image using nativePath
image.nativePath
and then store this path to the application property and reuse this property using Application getString function.

How to save the Instance State in Android applications developed with Titanium?

I'm working with Titanium 3.1 and developing for Android 3.0 and greater.
My app has a view that when clicked asks you if you want to take a picture or select an image from gallery. When I choose to take a picture from the camera, the camera shows with no problem and I can take the picture, the problem is that after I take the picture and choose to use it, my app resume from the beginning, not returning to the previous state it was showing before choosing to take a picture.
When I checked logcat I saw this line:
I/TiRootActivity(24120): (main) [0,0] checkpoint, on root activity create, savedInstanceState: null
It seems the state of my app is not being saved, but I don't know why. I'll be honest, this is my first time working on an app that goes to the camera app, takes a picture and returns to the app. Previously I've worked with Intents in Titanium and I've been able to return to the correct state of my app after exiting the application that was opened with the Intent using the back button.
This is the code I use to open the camera:
var globalBabyPicture = Titanium.UI.createImageView({
image:imagesPath + "kinedu_0027_ic_camara.png",
width:75,
});
var photoOptionsViewFromCamera = Ti.UI.createView({
width:Ti.Platform.displayCaps.platformWidth,
height:44,
left:0,
top:1*44,
backgroundColor:"transparent"
});
var photoOptionsViewFromCameraLabel = Ti.UI.createLabel({
text:"from camera",
font:{fontSize:14, fontFamily:"Arial Rounded MT Bold"},
color:"#368cd6"
});
photoOptionsViewFromCamera.add(photoOptionsViewFromCameraLabel);
photoOptionsViewFromCamera.addEventListener("touchstart", function(e){
var animateTouchStart = Ti.UI.createAnimation({backgroundColor:"#AFD1DE", duration:150});
photoOptionsViewFromCamera.animate(animateTouchStart);
});
//********* this is the code that triggers the camera to take the picture
photoOptionsViewFromCamera.addEventListener("touchend", function(e){
var animateTouchEnd = Ti.UI.createAnimation({backgroundColor:"transparent", duration:150});
photoOptionsViewFromCamera.animate(animateTouchEnd);
animateTouchEnd.addEventListener("complete", function(e){
Ti.Media.showCamera({
success : function(event) {
var tmp = Ti.Filesystem.getFile(Ti.Filesystem.tempDirectory, ('baby_temp.png'));
tmp.write(event.media);
var blob = tmp.read();
Ti.App.fireEvent("changePicture");
},
cancel : function() {
},
error : function(error) {
var message;
if (error.code == Ti.Media.NO_CAMERA) {
message = 'Device does not have camera capabilities';
} else {
message = 'Unexpected error: ' + error.code;
}
Ti.UI.createAlertDialog({
title : 'Camera',
message : message
}).show();
},
saveToPhotoGallery : false,
allowEditing : true,
mediaTypes : [Ti.Media.MEDIA_TYPE_PHOTO]
});
});
});
Ti.App.addEventListener("changePicture", function(e){
var tmp = Ti.Filesystem.getFile(Ti.Filesystem.tempDirectory, ('baby_temp.png'));
var blob = tmp.read();
var animationChange = Ti.UI.createAnimation({opacity:0, duration:200});
babyImage.animate(animationChange);
var animationChangeCompleted = Ti.UI.createAnimation({opacity:1, duration:200});
animationChange.addEventListener("complete", function(e){
babyImage.setWidth(100);
var image = blob.imageAsThumbnail(150);
babyImage.setImage(image);
babyImage.animate(animationChangeCompleted);
});
});
I've checked and the success callback is never made, I think it's because the application resumes from the beginning, showing the application splash screen.
How can I ensure that after taking the picture, the application returns to the previous view without resuming the application from the beginning?
I think allowEditing should be allowImageEditing

Categories

Resources