Why image auto rotate when set to Imageview with Picasso

Question

I take photo bt camera on mode landscape, after upload to server...It was landscape to.

But when i load to imageview then display vertical like below image:

I using Picasso to load image to Imageview.I want display like original image on ImageView... Please suggest for me...tks so much!

public static void makeImageRequest(Context context, ImageView imageView, final String imageUrl, ProgressBar progressBar) {
        final int defaultImageResId = R.drawable.ic_member;
        Picasso.with(context)
                .load(imageUrl)
                .error(defaultImageResId)
                .resize(80, 80)
                .into(imageView);
                }

ImageView:

<ImageView
                                android:layout_centerInParent="true"
                                android:padding="@dimen/_8sdp"
                                android:id="@+id/img_photo"
                                android:layout_width="@dimen/_80sdp"
                                android:layout_height="@dimen/_80sdp"
                                android:layout_gravity="center"
                                android:scaleType="fitCenter"
                                android:adjustViewBounds="true" />

URL:

https://arubaitobsv.s3-ap-northeast-1.amazonaws.com/images/1487816629838-20170223_092312_HDR.jpg

try this library before uploading to the server, github.com/zetbaitsu/Compressor, I was getting same rotation problem basically on high-end devices but if, before uploading, I am compressing, then the issue is resolved. — Prakhar Kulshreshtha, Aug 06 '18 at 08:35

score 21 · Accepted Answer · answered Feb 23 '17 at 09:33

21

The problem issued here

Picasso auto rotates by 90 degrees an image coming from the web that has the following EXIF data:

Resolution : 3264 x 2448
Orientation : rotate 90

try this code with picasso:

Picasso.with(MainActivity.this)
    .load(imageURL) // web image url
    .fit().centerInside()
    .transform(transformation)
    .rotate(90)                    //if you want to rotate by 90 degrees
    .error(R.drawable.ic_launcher)
    .placeholder(R.drawable.ic_launcher)
    .into(imageview)
    });

You can also use Glide:

    dependencies {
  // Your app's other dependencies
  compile 'com.github.bumptech.glide:glide.3.7.0'
}

laod image using:

Glide.with(this).load("image_url").into(imageView);

answered Feb 23 '17 at 09:33

rafsanahmad007

23,683
6
47
62

Yes. this works fine with Google drive images as well. but how to get Bitmap image from library? @rafsanahmad007. – pratik03 Jul 12 '17 at 09:36
1

try this library before uploading to the server, github.com/zetbaitsu/Compressor, I was getting same rotation problem basically on high-end devices but if, before uploading, I am compressing, then the issue is resolved. – Prakhar Kulshreshtha Aug 06 '18 at 08:35
1

It not right, it will rotate any image with resolution smaller – mducc Aug 20 '18 at 15:27
I used coil and it worked perfectly, I didn't need to do any changes to the picture after it was uploaded (from camera or files) – FabioR Jul 26 '22 at 21:10

score 10 · Answer 2 · edited Feb 23 '17 at 10:07

10

public class ImageRotationDetectionHelper {

    public static int getCameraPhotoOrientation(String imageFilePath) {
        int rotate = 0;
        try {

            ExifInterface exif;

            exif = new ExifInterface(imageFilePath);
            String exifOrientation = exif
                    .getAttribute(ExifInterface.TAG_ORIENTATION);
            Log.d("exifOrientation", exifOrientation);
            int orientation = exif.getAttributeInt(
                    ExifInterface.TAG_ORIENTATION,
                    ExifInterface.ORIENTATION_NORMAL);
            Log.d(ImageRotationDetectionHelper.class.getSimpleName(), "orientation :" + orientation);
            switch (orientation) {
                case ExifInterface.ORIENTATION_ROTATE_270:
                    rotate = 270;
                    break;
                case ExifInterface.ORIENTATION_ROTATE_180:
                    rotate = 180;
                    break;
                case ExifInterface.ORIENTATION_ROTATE_90:
                    rotate = 90;
                    break;
            }
        } catch (IOException e) {
            e.printStackTrace();
        }

        return rotate;
    }
}

edited Feb 23 '17 at 10:07

Aditya Vyas-Lakhan

13,409
16
61
96

answered Feb 23 '17 at 09:22

Sumit Chakraborty

164
8

use the above code to check the rotation angle of the image and rotate it if required – Sumit Chakraborty Feb 23 '17 at 09:27
Tks but url image display like picture i take picture on device, but when i set to imageview then unlike, it is rotate. – cheng Feb 23 '17 at 09:39
Either you need to check rotation of the image while uploading or after you fetch check the rotation and set the image either way will work – Sumit Chakraborty Feb 23 '17 at 09:48
can you provide me the code where you are trying to fetch image from camera and saving to the server. – Sumit Chakraborty Feb 23 '17 at 09:49
Nice answer sumit +1 – Aditya Vyas-Lakhan Feb 23 '17 at 10:05
I have http url, It is not working on this way. How do I work? – Dec 18 '17 at 12:46

score 4 · Answer 3 · answered Feb 23 '17 at 09:30

Try this way it will work

public class MainActivity extends Activity {

    private ImageView imgFromCameraOrGallery;
    private Button btnCamera;
    private Button btnGallery;

    private String imgPath;
    final private int PICK_IMAGE = 1;
    final private int CAPTURE_IMAGE = 2;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imgFromCameraOrGallery = (ImageView) findViewById(R.id.imgFromCameraOrGallery);
        btnCamera = (Button) findViewById(R.id.btnCamera);
        btnGallery = (Button) findViewById(R.id.btnGallery);

        btnCamera.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                final Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
                intent.putExtra(MediaStore.EXTRA_OUTPUT, setImageUri());
                startActivityForResult(intent, CAPTURE_IMAGE);
            }
        });

        btnGallery.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent();
                intent.setType("image/*");
                intent.setAction(Intent.ACTION_GET_CONTENT);
                startActivityForResult(Intent.createChooser(intent, ""), PICK_IMAGE);
            }
        });

    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (resultCode == Activity.RESULT_OK) {
            if (requestCode == CAPTURE_IMAGE) {
                setCapturedImage(getImagePath());
            } else if (requestCode == PICK_IMAGE) {
                imgFromCameraOrGallery.setImageBitmap(BitmapFactory.decodeFile(getAbsolutePath(data.getData())));
            }
        }

    }

    private String getRightAngleImage(String photoPath) {

        try {
            ExifInterface ei = new ExifInterface(photoPath);
            int orientation = ei.getAttributeInt(ExifInterface.TAG_ORIENTATION, ExifInterface.ORIENTATION_NORMAL);
            int degree = 0;

            switch (orientation) {
                case ExifInterface.ORIENTATION_NORMAL:
                    degree = 0;
                    break;
                case ExifInterface.ORIENTATION_ROTATE_90:
                    degree = 90;
                    break;
                case ExifInterface.ORIENTATION_ROTATE_180:
                    degree = 180;
                    break;
                case ExifInterface.ORIENTATION_ROTATE_270:
                    degree = 270;
                    break;
                case ExifInterface.ORIENTATION_UNDEFINED:
                    degree = 0;
                    break;
                default:
                    degree = 90;
            }

            return rotateImage(degree,photoPath);

        } catch (Exception e) {
            e.printStackTrace();
        }

        return photoPath;
    }

    private String rotateImage(int degree, String imagePath){

        if(degree<=0){
            return imagePath;
        }
        try{
            Bitmap b= BitmapFactory.decodeFile(imagePath);

            Matrix matrix = new Matrix();
            if(b.getWidth()>b.getHeight()){
                matrix.setRotate(degree);
                b = Bitmap.createBitmap(b, 0, 0, b.getWidth(), b.getHeight(),
                        matrix, true);
            }

            FileOutputStream fOut = new FileOutputStream(imagePath);
            String imageName = imagePath.substring(imagePath.lastIndexOf("/") + 1);
            String imageType = imageName.substring(imageName.lastIndexOf(".") + 1);

            FileOutputStream out = new FileOutputStream(imagePath);
            if (imageType.equalsIgnoreCase("png")) {
                b.compress(Bitmap.CompressFormat.PNG, 100, out);
            }else if (imageType.equalsIgnoreCase("jpeg")|| imageType.equalsIgnoreCase("jpg")) {
                b.compress(Bitmap.CompressFormat.JPEG, 100, out);
            }
            fOut.flush();
            fOut.close();

            b.recycle();
        }catch (Exception e){
            e.printStackTrace();
        }
        return imagePath;
    }

    private void setCapturedImage(final String imagePath){
        new AsyncTask<Void,Void,String>(){
            @Override
            protected String doInBackground(Void... params) {
                try {
                    return getRightAngleImage(imagePath);
                }catch (Throwable e){
                    e.printStackTrace();
                }
                return imagePath;
            }

            @Override
            protected void onPostExecute(String imagePath) {
                super.onPostExecute(imagePath);
                imgFromCameraOrGallery.setImageBitmap(decodeFile(imagePath));
            }
        }.execute();
    }

    public Bitmap decodeFile(String path) {
        try {
            // Decode deal_image size
            BitmapFactory.Options o = new BitmapFactory.Options();
            o.inJustDecodeBounds = true;
            BitmapFactory.decodeFile(path, o);
            // The new size we want to scale to
            final int REQUIRED_SIZE = 1024;

            // Find the correct scale value. It should be the power of 2.
            int scale = 1;
            while (o.outWidth / scale / 2 >= REQUIRED_SIZE && o.outHeight / scale / 2 >= REQUIRED_SIZE)
                scale *= 2;
            // Decode with inSampleSize
            BitmapFactory.Options o2 = new BitmapFactory.Options();
            o2.inSampleSize = scale;
            return BitmapFactory.decodeFile(path, o2);
        } catch (Throwable e) {
            e.printStackTrace();
        }
        return null;
    }

    public String getAbsolutePath(Uri uri) {
        if(Build.VERSION.SDK_INT >= 19){
            String id = "";
            if(uri.getLastPathSegment().split(":").length > 1)
                id = uri.getLastPathSegment().split(":")[1];
            else if(uri.getLastPathSegment().split(":").length > 0)
                id = uri.getLastPathSegment().split(":")[0];
            if(id.length() > 0){
                final String[] imageColumns = {MediaStore.Images.Media.DATA };
                final String imageOrderBy = null;
                Uri tempUri = getUri();
                Cursor imageCursor = getContentResolver().query(tempUri, imageColumns, MediaStore.Images.Media._ID + "=" + id, null, imageOrderBy);
                if (imageCursor.moveToFirst()) {
                    return imageCursor.getString(imageCursor.getColumnIndex(MediaStore.Images.Media.DATA));
                }else{
                    return null;
                }
            }else{
                return null;
            }
        }else{
            String[] projection = { MediaStore.MediaColumns.DATA };
            Cursor cursor = getContentResolver().query(uri, projection, null, null, null);
            if (cursor != null) {
                int column_index = cursor.getColumnIndexOrThrow(MediaStore.MediaColumns.DATA);
                cursor.moveToFirst();
                return cursor.getString(column_index);
            } else
                return null;
        }

    }

    private Uri getUri() {
        String state = Environment.getExternalStorageState();
        if(!state.equalsIgnoreCase(Environment.MEDIA_MOUNTED))
            return MediaStore.Images.Media.INTERNAL_CONTENT_URI;

        return MediaStore.Images.Media.EXTERNAL_CONTENT_URI;
    }

    public Uri setImageUri() {
        Uri imgUri;
        String state = Environment.getExternalStorageState();
        if (Environment.MEDIA_MOUNTED.equals(state)) {
            File file = new File(Environment.getExternalStorageDirectory() + "/DCIM/",getString(R.string.app_name) + Calendar.getInstance().getTimeInMillis() + ".png");
            imgUri = Uri.fromFile(file);
            imgPath = file.getAbsolutePath();
        }else {
            File file = new File(getFilesDir() ,getString(R.string.app_name) + Calendar.getInstance().getTimeInMillis()+ ".png");
            imgUri = Uri.fromFile(file);
            this.imgPath = file.getAbsolutePath();
        }
        return imgUri;
    }

    public String getImagePath() {
        return imgPath;
    }
}

your ans is correct but he is using Picasso so he just need to check the image roation and can rotate the image using picasso — Sumit Chakraborty, Feb 23 '17 at 09:34
`Picasso .with(context) .load(UsageExampleListViewAdapter.eatFoodyImages[0]) .rotate(90f) .into(imageViewSimpleRotate);` — Sumit Chakraborty, Feb 23 '17 at 09:35
Tks but I think: mages after capture is correct, after upload to server is also true.But only set into Imageview is wrong because it is rotate. I only want it display like original image — cheng, Feb 23 '17 at 09:35
Yes, but cause is by picasso, i take photo on LG G3(2K) so large resolution. I try use Glide Lib then image display correct.Tks so much! — cheng, Feb 23 '17 at 10:05

score 0 · Answer 4 · answered Aug 01 '18 at 15:27

This code is all you need to check and fix the rotation, then once you have the filePath then parse the path string as a Uri in the Picasso Load

Loading into Picasso:

String imagePath = /* your image path here */
Picasso.get()
       .load(Uri.parseString(getRightAngleImage(imagePath)))
       .into(/* your ImageView id here */);

Function for rotating and retrieving filePath:

private String getRightAngleImage(String photoPath) {

    try {
        ExifInterface ei = new ExifInterface(photoPath);
        int orientation = ei.getAttributeInt(ExifInterface.TAG_ORIENTATION, ExifInterface.ORIENTATION_NORMAL);
        int degree = 0;

        switch (orientation) {
            case ExifInterface.ORIENTATION_NORMAL:
                degree = 0;
                break;
            case ExifInterface.ORIENTATION_ROTATE_90:
                degree = 90;
                break;
            case ExifInterface.ORIENTATION_ROTATE_180:
                degree = 180;
                break;
            case ExifInterface.ORIENTATION_ROTATE_270:
                degree = 270;
                break;
            case ExifInterface.ORIENTATION_UNDEFINED:
                degree = 0;
                break;
            default:
                degree = 90;
        }

        return rotateImage(degree,photoPath);

    } catch (Exception e) {
        e.printStackTrace();
    }

    return photoPath;
}

private String rotateImage(int degree, String imagePath){

    if(degree<=0){
        return imagePath;
    }
    try{
        Bitmap b= BitmapFactory.decodeFile(imagePath);

        Matrix matrix = new Matrix();
        if(b.getWidth()>b.getHeight()){
            matrix.setRotate(degree);
            b = Bitmap.createBitmap(b, 0, 0, b.getWidth(), b.getHeight(),
                    matrix, true);
        }

        FileOutputStream fOut = new FileOutputStream(imagePath);
        String imageName = imagePath.substring(imagePath.lastIndexOf("/") + 1);
        String imageType = imageName.substring(imageName.lastIndexOf(".") + 1);

        FileOutputStream out = new FileOutputStream(imagePath);
        if (imageType.equalsIgnoreCase("png")) {
            b.compress(Bitmap.CompressFormat.PNG, 100, out);
        }else if (imageType.equalsIgnoreCase("jpeg")|| imageType.equalsIgnoreCase("jpg")) {
            b.compress(Bitmap.CompressFormat.JPEG, 100, out);
        }
        fOut.flush();
        fOut.close();

        b.recycle();
    }catch (Exception e){
        e.printStackTrace();
    }
    return imagePath;
}

Thanks to Aditya Vyas-Lahkan for the function, it worked for me with some minor modifications.

Hope this helps!

score 0 · Answer 5 · answered Dec 26 '19 at 16:20

0

I'm duplicating answer by Prakhar1001! Try use this library Compressor. This solved Picasso rotation issue. Just compress your image file before uploading it to the server.

answered Dec 26 '19 at 16:20

Arthur Arzumanyan

17
4

score 0 · Answer 6 · answered Jul 25 '20 at 15:26

This is the correct implementation.

First know what's the correct angle:

    fun getRotation(context: Context, selectedImage: Uri): Float {
        val ei = ExifInterface(context.contentResolver.openInputStream(selectedImage)!!)
        val orientation: Int =
            ei.getAttributeInt(ExifInterface.TAG_ORIENTATION, ExifInterface.ORIENTATION_NORMAL)
        return when (orientation) {
            ExifInterface.ORIENTATION_NORMAL -> 0f
            ExifInterface.ORIENTATION_ROTATE_90 -> 90f
            ExifInterface.ORIENTATION_ROTATE_180 -> 180f
            ExifInterface.ORIENTATION_ROTATE_270 -> 270f
            ExifInterface.ORIENTATION_UNDEFINED -> 0f
            else -> 90f
        }
    }

Then,

            val inputStream = context.contentResolver.openInputStream(IMAGE_URI_HERE)
            val file = File(filesDir, "image.YOUR_EXT")
            if (inputStream != null) {
                val outputStream: OutputStream = FileOutputStream(file)
                val BUFFER_SIZE = 1024 * 2
                val buffer = ByteArray(BUFFER_SIZE)
                var n: Int
                try {
                    BufferedInputStream(inputStream, BUFFER_SIZE).use { `in` ->
                        BufferedOutputStream(outputStream, BUFFER_SIZE).use { out ->
                            while (`in`.read(buffer, 0, BUFFER_SIZE).also { n = it } != -1) {
                                out.write(buffer, 0, n)
                            }
                            out.flush()
                        }
                    }
                } catch (e: IOException) {
                    e.printStackTrace()
                    myFile.isSuccess = false
                    myFile.errorMsg = "05" //IOException 2
                    return myFile
                }
                inputStream.close()
                outputStream.close()
            }

Then create bitmap from the file and rotate

val bitmapOriginal = BitmapFactory.decodeFile(file.filePath)
val rotatedBitmap = rotateBitmap(bitmapOriginal, getRotation(context, uri)) //This is your final Bitmap
fun rotateImage(img: Bitmap, degree: Float): Bitmap {
        val matrix = Matrix()
        matrix.postRotate(degree)
        val rotatedImg = Bitmap.createBitmap(img, 0, 0, img.width, img.height, matrix, true)
        img.recycle()
        return rotatedImg
    }

At last, delete the file after work is done

file.delete()

Why image auto rotate when set to Imageview with Picasso

6 Answers6

Linked

Related