How to rotate picasso url image based on exif - android

images loaded using picasso.get().load(url) are rotated. I tried to use .apply { rotate(90F) } which does rotation for all images loaded from URL.
if the picture is taken in portait, rotating 90 works fine but if the image is taken in landscape this does not work.
Is there a way I could rotate picasso image based on exif.
this is the code I have at the moment
Picasso.get().load(url)
.apply { placeholderRes?.let { placeholder(it) } }
.apply { if (resizeWidthRes != null && resizeHeightRes != null) resizeDimen(resizeWidthRes, resizeHeightRes) }
.apply { if (convertToCircle) transform(CircleTransformation()) }
.apply { rotate(90F) } //DOES NOT WORK FOR LANDSCAPE PICTURES
.into(imageView)
Picture taken in landscape
Picture loaded in image view which is roatated
Any suggestions on how to use exif and rotate picasso image from url would be very helpful
Thanks
R

Related

how to crop image to square - android?

so i have a profile activity with a profile image. Now the image that was taken vertically. And I have horizontal image views. When i grab images onActivityResult() how do i "square" the image. By square the image, I mean, I want each image's width to be the width of the screen (and since its a square, height = image width = screen width).
In onActivityResult() i get the image from my gallery and camera back as a string path (which i can convert to a bitmap). Additionally, when i get images i get them from my backend using the Glide library and a url.
Glide.with(context).load("www.mybackendToImagePath").centerCrop().into(newImageView);
So, I need to convert that image path into a bitmap and then somehow square that bitmap with my screen's width. I'm not sure what code allows me to:
get the dimensions of the device.
transform's the image's width and height, to the width of the device.
Hope you guys can help!
Heres what my profile activity looks like.
You can use this https://github.com/Yalantis/uCrop library to crop image you get from camera or gallery. Include the library as local library project
allprojects {
repositories {
jcenter()
maven { url "https://jitpack.io" }
}
}
Add Dependencies
compile 'com.github.yalantis:ucrop:2.2.1'
or
compile 'com.github.yalantis:ucrop:2.2.1-native'
Add UCropActivity into your AndroidManifest.xml
<activity
android:name="com.yalantis.ucrop.UCropActivity"
android:screenOrientation="portrait"
android:theme="#style/Theme.AppCompat.Light.NoActionBar"/>
Now pass the URI of your image as sourceUri in following code and destinationUri will be where you want to place your cropped image
UCrop.of(sourceUri, destinationUri)
.withAspectRatio(1, 1)//1, 1 is the ratio b/w width and height of image i.e. square you can pass any ratio here
.withMaxResultSize(maxWidth, maxHeight)
.start(context);
Override onActivityResult method and handle uCrop result.
#Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
if (resultCode == RESULT_OK && requestCode == UCrop.REQUEST_CROP) {
final Uri resultUri = UCrop.getOutput(data);
} else if (resultCode == UCrop.RESULT_ERROR) {
final Throwable cropError = UCrop.getError(data);
}
}

Correctly download and display image from server

Now, in my app, each placeholder has size, that was set in xml and after image was downloaded it resizes ImageView height with horrible visual effect.
How can I get image size, that is downloading and should be displayed in
ImageView, to make the same placeholder size like in Facebook application live feed? Maybe I should include image ratio for each link in json file that is downloading from server, or Fresco, Glide or Picasso has some tricks to acheive this?
If you want to resize the placeholder to the actual image dimensions before downloading the image, you have to somehow get this information from your server. You could, like you've already suggested, include the image dimensions / aspect ratio to the request and then use that information to properly size your views upfront.
Because of this horrible visual effect you've mentioned, Fresco doesn't support wrap_content but it supports setting an aspect ratio for the DraweeView that you can set using your server data.
See also http://frescolib.org/docs/wrap-content.html
Try using ResourceTranscoder with glide request as mentioned below:
Glide
.with(this)
.load(imageUrl)
.asBitmap()
.transcode(new BitmapSizeTranscoder(), Size.class)
.into(new SimpleTarget<Size>() {
#Override public void onResourceReady(Size size, GlideAnimation glideAnimation) {
Log.w("SIZE", String.format(Locale.ENGLISH, "%dx%d", size.width, size.height));
}
});
class Size {
int width;
int height;
}
class BitmapSizeTranscoder implements ResourceTranscoder<Bitmap, Size> {
#Override public Resource<Size> transcode(Resource<Bitmap> toTranscode) {
Bitmap bitmap = toTranscode.get();
Size size = new Size();
size.width = bitmap.getWidth();
size.height = bitmap.getHeight();
return new SimpleResource<>(size);
}
#Override public String getId() {
return getClass().getName();
}
}

How can I rotate image with Fresco Image Viewer library?

I use fresco image viewer library in my app and everything works prefect but I have a problem with rotating image. by default this library can rotate image automatically when the device screen rotation is on but I don't want to use that way.
actually I want to know how can I rotate it by touch or button click in 90 degree and it's very important to work with this library.
This is my code to show image :
ImagePipelineConfig config = ImagePipelineConfig.newBuilder(mContext)
.setProgressiveJpegConfig(new SimpleProgressiveJpegConfig())
.setResizeAndRotateEnabledForNetwork(true)
.setDownsampleEnabled(true)
.build();
Fresco.initialize(mContext, config);
ImageViewer.Builder builder = new ImageViewer.Builder < > (mContext, images);
builder.setFormatter(new ImageViewer.Formatter < Image > () {
#Override
public String format(Image customImage) {
return customImage.getLarge();
}
}).setOverlayView(overlayView)
.show();
https://github.com/stfalcon-studio/FrescoImageViewer
Example for a 90 degree rotation:
ImageRequest imageRequest = ImageRequestBuilder.newBuilderWithSource(URI)
.setRotationOptions(RotationOptions.forceRotation(RotationOptions.ROTATE_90))
.build();
See also this example in Fresco's Showcase sample app.

How to remove mirror effect after capturing image from front camera? [Android]

Basically i create a simple android camera app not adding video recording , i followed this link
android camera app tutorial link
the problem is when i capture image from front camera , after click capture button the image showing mirrored just like we stand front of mirror. e.g i have right side arrow image but when i capture, it preview left side arrow.Sorry for English.
When you display the bitmap, you may use scale attributes in imageView
android:scaleX="-1" //To flip horizontally or
android:scaleY="-1" //To flip verticallyenter code here
You may also want to look into this post and this tutorial
Update 1:
You can flip the image in preview in a similar manner. You could also create a helper function to flip the bitmap and then set it to the imageView.
Helper function to flip the image could be found here. For your code you may just need the following:
public static Bitmap flip(Bitmap src, int type) {
// create new matrix for transformation
Matrix matrix = new Matrix();
matrix.preScale(-1.0f, 1.0f);
// return transformed image
return Bitmap.createBitmap(src, 0, 0, src.getWidth(), src.getHeight(), matrix, true);
}
and then in your previewCaptureImage method, instead of this imgPreview.setImageBitmap(bitmap); , use the flip method and then set it to imageView like this
imgPreview.setImageBitmap(flip(bitmap));
val outputOptions = ImageCapture
.OutputFileOptions
.Builder(photoFile)
.setMetadata(ImageCapture.Metadata().also {
it.isReversedHorizontal = CameraSelector.LENS_FACING_FRONT == lensFacing
}).build()
you need to pass metadata by isReversedHorizontal to true with the outputOptions as of you are trying to capture an image through the front camera and front camera always in mirror form.
val metadata = ImageCapture.Metadata().apply {
isReversedHorizontal = true
}
val outputOptions = ImageCapture.OutputFileOptions.Builder(photoFile)
.setMetadata(metadata)
.build()
imageCapture.takePicture(
outputOptions, cameraExecutor, object : ImageCapture.OnImageSavedCallback {
override fun onError(exc: ImageCaptureException) {
Log.e(TAG, "Photo capture failed: ${exc.message}", exc)
}
override fun onImageSaved(output: ImageCapture.OutputFileResults) {
val savedUri = output.savedUri ?: Uri.fromFile(photoFile)
Log.d(TAG, "Photo capture succeeded: $savedUri")
}
})

Android SavePhoto Rotate Bitmap Prior to Save

I have an Android app which is capturing an image as a CameraPreview image.
Prior to capturing the image is appears on the Phone screen in Portrait mode (as needed).
But when I do a Save, the image goes to the JPG file rotated to Landscape mode.
I have confirmed this by going to MyFiles, finding the image and viewing it with Gallery - it pops up on-screen in Landscape mode.
Additionally when I upload the image files onto my computer they show up in Landscape mode there as well.
The image is correct, but the orientation is wrong.
The method that I am using to Save is as follows:
private boolean savePhoto(Bitmap bm) {
FileOutputStream image = null;
try {
image = new FileOutputStream(mLocation);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
bm.compress(CompressFormat.JPEG, 100, image);
if (bm != null) {
int h = bm.getHeight();
int w = bm.getWidth();
} else {
return false;
}
return true;
}
Can I insert code here or call a routine (if so what code is needed) that can rotate the image into the appropriate orientation prior to the actual Save?
Or is there some other manner to change the resultant JPG image orientation?
POST EDIT - I just now added the following code to examine the Saved JPG file.
ExifInterface exif = new ExifInterface(f.getPath());
int orientation = exif.getAttributeInt(ExifInterface.TAG_ORIENTATION, ExifInterface.ORIENTATION_NORMAL);
However it returned an Orientation = 0 which is not telling me that it 'thinks' that the JPG was Saved in Landscape orientation so that I might be able to use other posting's code.
Thanks

Categories

Resources