Laravel is rotating the image when uploaded

Question

I am developing a web application that involves the feature of uploading image to server. I am using Laravel. The problem is when I upload a photo, Laravel is rotating the image.

This is my code to upload image file.

$request->file('image_file')->store('images');

Just one line of code for uploading the image.

I uploaded this image.

Then, the photo is rotated on the server and becomes like this. I display the image in the HTML tag.

So, what is wrong. How can I stop the photo from being rotated?

Commutative

Are you sure you are not doing any magic with CSS? Hit us with your HTML code. – Livialivid

I am sure. I dont modify – Commutative

are you uploading by android or mobile ? Not by Web directly? – Saltant

Oh, Actually, the image is not rotated by Laravel. The image setting is fine. It only happens when I render it into img tag. But I am not doing any CSS rules to the image as well apart from setting the radius. – Commutative

Answer 1

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.

Precept

Yeah, That might be the point. All the photos are taken using mobile camera coz we need exif data to process the image. Thanks. But I am uploading straight to the s3 bucket. If I had to use the Intervention, I have to process image locally first, then send to s3 bucket. The process might be slow. Is it? Is there a faster and better way, please? – Commutative

If the images are smaller and less than 5M then you can do it locally and then upload it to S3. OR you can implement the Queue for manipulation and uploading of large files. – Precept

Hi Adnan. According to ur code using image intervention, do I have to save it locally first before I upload it to to s3? – Commutative

@WaiYanHein yess – Precept

Where does $image come from?! @PULLSTACKDEV – Scopolamine

Answer 2

I had this issue when converting HTML to PDF using Snappy PDF/Image Wrapper for Laravel wkhtmltopdf and the below solution is what worked for me:

/**
 * @param \Illuminate\Http\UploadedFile $filename
 */
function correctImageOrientation($filename)
{
    if (function_exists('exif_read_data')) {
        $exif = exif_read_data($filename);
        if ($exif && isset($exif['Orientation'])) {
            $orientation = $exif['Orientation'];
            if ($orientation != 1) {
                $img = imagecreatefromjpeg($filename);
                $deg = 0;
                switch ($orientation) {
                    case 3:
                        $deg = 180;
                        break;
                    case 6:
                        $deg = 270;
                        break;
                    case 8:
                        $deg = 90;
                        break;
                }
                if ($deg) {
                    $img = imagerotate($img, $deg, 0);
                }
                // then rewrite the rotated image back to the disk as $filename
                imagejpeg($img, $filename->getPath() . DIRECTORY_SEPARATOR . $filename->getFilename(), 100);
            } // if there is some rotation necessary
        } // if have the exif orientation info
    } // if function exists
}

$fileInputs = $request->file();
/** @var UploadedFile $file */
$file = $fileInputs['value'];
correctImageOrientation($file);

// then save the image

Eurasian

Answer 3

For Intervention Image Version 3

$manager = ImageManager::gd(autoOrientation: false);
$image = $manager->read($pathToFile);
$image = $image->orient();
$image->save($pathToFile);

Ravenna

Answer 4

i found an easy way to do it its work for me you just upload your image in google drive then download it again that s it if it doesnt work i m sorry but it s work for me

Edan

Upload to Google Drive through API. Then download from it and save it locally? – Commutative

Users will never do that. – Allenaallenby

Comedy of 2019! – Weinberg

We have to try to provide a logical and standard solution. – Aeriela