Images Are Being Rotated by Default Upon Upload

Images are being rotated by default upon upload

When you turn around your phone to take pictures, the light strikes the camera sensor on the orientation as you hold the phone. The camera app does not save images turned as you see them on the screen, but it just flags them with the current EXIF orientation data from the orientation sensor.

This information is interpreted by your gallery app to show the image accordingly, but a browser ignores it and shows the pictures as they were taken by the sensors perspective.

Turning around images:

You can turn and save the pictures according to the EXIF data on a server with imagemagick auto-orient:

convert uploadedImage.jpg -auto-orient turnedImage.jpg

Or turn them with JavaScript on the client with the exif-orient Script or with jQuery as explained in this post.

Camera image gets rotated when I upload to server

I spent some time few weeks ago facing the same issue. I made some digging and this is what I did to have my photo uploaded always in correct orientation : ). It works every time for every device. Hope it helps.

//this is the byte stream that I upload.
public static byte[] getStreamByteFromImage(final File imageFile) {

    Bitmap photoBitmap = BitmapFactory.decodeFile(imageFile.getPath());
    ByteArrayOutputStream stream = new ByteArrayOutputStream();

    int imageRotation = getImageRotation(imageFile);

    if (imageRotation != 0)
        photoBitmap = getBitmapRotatedByDegree(photoBitmap, imageRotation);

    photoBitmap.compress(Bitmap.CompressFormat.JPEG, 70, stream);

    return stream.toByteArray();
}

private static int getImageRotation(final File imageFile) {

    ExifInterface exif = null;
    int exifRotation = 0;

    try {
        exif = new ExifInterface(imageFile.getPath());
        exifRotation = exif.getAttributeInt(ExifInterface.TAG_ORIENTATION, ExifInterface.ORIENTATION_NORMAL);
    } catch (IOException e) {
        e.printStackTrace();
    }

    if (exif == null)
        return 0;
    else
        return exifToDegrees(exifRotation);
}

private static int exifToDegrees(int rotation) {
    if (rotation == ExifInterface.ORIENTATION_ROTATE_90)
        return 90;
    else if (rotation == ExifInterface.ORIENTATION_ROTATE_180)
        return 180;
    else if (rotation == ExifInterface.ORIENTATION_ROTATE_270)
        return 270;

    return 0;
}

private static Bitmap getBitmapRotatedByDegree(Bitmap bitmap, int rotationDegree) {
    Matrix matrix = new Matrix();
    matrix.preRotate(rotationDegree);

    return Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
}

Uploaded images in React rotating when uploading on iPhone

This easiest way I found to fix this was by using the following package: https://www.npmjs.com/package/blueimp-load-image

The issue is when uploading images on an iPhone using the image type Heif (which is the default type an image is taken in), it adds exif data to the image. In order to access this exif data and reset the orientation value, you can do something like I have done below.

import loadImage from "blueimp-load-image";

   // Get the file from the input
   let file = e.target.files[0];

   // Use the package to reset the orientation data
    loadImage(
      file,
      function (img, data) {
        if (data.imageHead && data.exif) {
          // Reset Exif Orientation data:
          loadImage.writeExifData(data.imageHead, data, "Orientation", 1);
          img.toBlob(function (blob) {
            loadImage.replaceHead(blob, data.imageHead, function (newBlob) {
              // do something with newBlob
              file = newBlob;
            });
          }, "image/jpeg");
        }
      },
      { meta: true, orientation: true, canvas: true, maxWidth: 800 }
    );

Problem with image orientation after upload

This is the solution that works for me now. The image orientation correction code is in lines 50-70. There may be a better solution, but this is the only thing I have managed to do, to work properly:

<?php
if(isset($_FILES['image'])){
    $errors= array();
    foreach($_FILES['image']['tmp_name'] as $key => $tmp_name ){
        $file_name =$_FILES['image']['name'][$key];
        $file_size =$_FILES['image']['size'][$key];
        $file_tmp =$_FILES['image']['tmp_name'][$key];
        $file_type=$_FILES['image']['type'][$key];      

            // Remove encoding problem
            $file_name = Normalizer::normalize($file_name); 
            setlocale(LC_ALL,'bs_BA.UTF-8');        

            // get file extension
            $fileType = strtolower(pathinfo($file_name, PATHINFO_EXTENSION)); 

            $temp = pathinfo($file_name, PATHINFO_EXTENSION);
            $name = str_replace($temp, '', $file_name);

            // get filename without extension
            $fileNewName = pathinfo($name, PATHINFO_FILENAME);
            $watermarkImagePath = 'watermark.png'; 
            $folderPath = "a/";
            $sourceProperties = getimagesize($file_tmp);
            $imageType = $sourceProperties[2];

            // Resize code
            switch ($imageType) {
            case IMAGETYPE_PNG:
                $imageResourceId = imagecreatefrompng($file_tmp); 
                $targetLayer = imageResize($imageResourceId,$sourceProperties[0],$sourceProperties[1]);
                imagepng($targetLayer,$folderPath. $fileNewName. ".jpg");
                break;
            case IMAGETYPE_GIF:
                $imageResourceId = imagecreatefromgif($file_tmp); 
                $targetLayer = imageResize($imageResourceId,$sourceProperties[0],$sourceProperties[1]);
                imagegif($targetLayer,$folderPath. $fileNewName. ".jpg");
                break;
            case IMAGETYPE_JPEG:
                $imageResourceId = imagecreatefromjpeg($file_tmp); 
                $targetLayer = imageResize($imageResourceId,$sourceProperties[0],$sourceProperties[1]);
                imagejpeg($targetLayer,$folderPath. $fileNewName. ".jpg");

                break;
            default:
                echo "Invalid Image type.";
                exit;
                break;
            }               

        // Image Orientation correction                         

        $targetFilePath = $folderPath . $file_name;                 
        $exif = exif_read_data($file_tmp);
        if ($exif['Orientation']==3 OR $exif['Orientation']==6 OR $exif['Orientation']==8) {
            $imageResource = imagecreatefromjpeg($targetFilePath); 
            switch ($exif['Orientation']) { 
            case 3:
            $image = imagerotate($imageResource, 180, 0);
            break;
            case 6:
            $image = imagerotate($imageResource, -90, 0);
            break;
            case 8:
            $image = imagerotate($imageResource, 90, 0);
            break;
        } 
        imagejpeg($image, $targetFilePath);
        imagedestroy($imageResource);
        imagedestroy($image);
        }

        // watermark code

                $watermarkImg = imagecreatefrompng($watermarkImagePath); 

                if(preg_match('/[.](jpg)$/i', $file_name)) {  
                $im = imagecreatefromjpeg($targetFilePath);  
              } else if (preg_match('/[.](jpeg)$/i', $file_name)) {  
                $im = imagecreatefromjpeg($targetFilePath);  
              } else if (preg_match('/[.](png)$/i', $file_name)) {  
                $im = imagecreatefrompng($targetFilePath);  
              }  else if (preg_match('/[.](gif)$/i', $file_name)) {  
                $im = imagecreatefromgif($targetFilePath);  
              }  

                $marge_right = 1; 
                $marge_bottom = 1; 

                $sx = imagesx($watermarkImg); 
                $sy = imagesy($watermarkImg); 

                imagecopy($im, $watermarkImg, imagesx($im) - $sx - $marge_right, imagesy($im) - $sy - $marge_bottom, 0, 0, imagesx($watermarkImg), imagesy($watermarkImg)); 

                imagejpeg($im, $targetFilePath,70); 
                imagedestroy($im);     

    }
     echo ' Successful upload';
}
function imageResize($imageResourceId,$width,$height) {
if($width > $height){
    $targetWidth=1000;
    $targetHeight=($height/$width)*$targetWidth;
} else {
    $targetHeight=1000;
$targetWidth=($width/$height)*$targetHeight;}
    $targetLayer=imagecreatetruecolor($targetWidth,$targetHeight);
    imagecopyresampled($targetLayer,$imageResourceId,0,0,0,0,$targetWidth,$targetHeight, $width,$height);
    return $targetLayer;
}

?>
<div class="sender">
<form action="" method="POST" enctype="multipart/form-data">
    <input type="file" name="image[]" multiple/>
    <input type="submit" value="Send"/>
</form></div>

Laravel is rotating the image when uploaded

This happen when you capture the image with Mobile camera.

you can see the image data using exif_read_data()

But if you want to store it in an orignal way you can use intervention/image package.

and use orientate() to change it. Here is an example

$img = \Image::make($request->file('image_file')->getRealpath());
$img->orientate();

But if you dont want to use the Package you can try

$exif = exif_read_data($request->file('image_file'));
if(!empty($exif['Orientation'])) {
    switch($exif['Orientation']) {
        case 8:
            $image = imagerotate($image,90,0);
            break;
        case 3:
            $image = imagerotate($image,180,0);
            break;
        case 6:
            $image = imagerotate($image,-90,0);
            break;
    }
}

Hope this helps.

Captured photo automatically rotated during upload in IOS 6.0 or iPhone

This could have something to do with EXIF/TIFF metatags in the images.

One of these tags indicates the orientation of the image. Some photos you upload to a server (eg from the iPhone) may have these tags, others (from a different source / workflow) may not. The server may or may not retain these tags, and may or may not read the tags in order to attempt correct orientation of the image. Similarly a web browser may or may not pay attention to these tags. If you upload images containing tags, the results will certainly be unpredictable.

A good way to find out if this is the issue would be to download a 'problem' image and a 'good' image from the server, and compare them. Open them in preview and check the second tab of the Inspector. Any meta-info will be displayed there. See if one image has orientation info and the other not. If neither display meta-info then it is fairly likely the server is stripping it all out and not using it, and you can forget about this answer.

Also you should compare in different browsers. Some browsers read this orientation info and rotate the image accordingly, others do not.

For example, an iPhone photo of mine which was take in portrait mode has the following metatags:

Pixel Height: 2,448
Pixel Width: 3,264
Orientation: 6 (Rotated 90° CCW)

The native bitmap orientation is landscape.

The 'orientation' metatag indicates to image reading software to rotate to portrait for display.

The metatag is used by (some) image software to 'correctly' rotate the image to portrait but ignored by other software which will display the image as landscape.

The situation is confusing and there is no established standard for this (the tags are just a hint), so when preparing images for an online publication the safest thing is to strip out these tags and physically rotate the image to the correct BITMAP orientation before uploading. If you are writing the server side of an app you could do this on the server. But it is vital to deliver images to a web browser in the correct BITMAP orientation with no orientation metatags.

Why is this? Because even today different browsers take different approaches to metatags.

The iPhone image I just mentioned displays as follows:

Google Chrome 24 portrait
Safari 6 portrait
Firefox 17 landscape
Opera 12 landscape

Not a great state of affairs!

Images Are Being Rotated by Default Upon Upload