PHP or CSS: How to rotate images uploaded from iphone correctly?

222
September 18, 2017, at 07:28 AM

We have a feature that lets users upload images on a website, which can be from a desktop or taken from any cellphone. But from some phones like Iphone images taken vertically end up rotated the wrong way. We need them to be displayed correctly on any device when uploaded from any device.

I found some similar questions but their solution didn't seem to work completely. I need to either rotate them correctly in php as soon as they are uploaded:

if(isset($_FILES["submit_image"])) {
$target_dir = "uploads/images/";
$name = $_FILES['submit_image']['name'];
$size = $_FILES['submit_image']['size'];
$tmp_name = $_FILES['submit_image']['tmp_name'];
//make sure the image is roated correctly? I tried this code that I found in other SO questions but then it doesn't seem to be saving it
// START ORIENTATION FIX
$info = getimagesize($tmp_name);
$image = imagecreatefrompng($tmp_name);
if($info['mime'] == 'image/jpeg') {
    $exif = exif_read_data($tmp_name);
    if(isset($exif['Orientation'])) {
        $orientation = $exif['Orientation'];
    }
}
if(isset($orientation)) { //rotate to match the orientation
    switch($orientation) {
        case 3:
            $image = imagerotate($image, 180, 0);
            break;
        case 6:
            $image = imagerotate($image, -90, 0);
            break;
        case 8:
            $image = imagerotate($image, 90, 0);
            break;
    }
}
if(isset($image)) { //get the variables of the rotated image
    $tmp_name = $image["tmp_name"];
    $name = $image['name'];
    $size = $image['size'];
}
// END ORIENTATION FIX
/*doing some other checks here for image name, size, and mime type
    ...
*/
$path = calculate_file_path($target_dir, $name);
if (move_uploaded_file($tmp_name, $path) == true) {
    $query = "UPDATE {$table} SET {$column} = '{$path}' WHERE id = {$new_pro_id}";
    $result = mysqli_query($db, $query);
    if ($result) {
        //saved
    }
    else{
        //failed
    }
}
}

Or maybe fix them later with css whenever the site needs to display them:

.profile_img
{
    image-orientation: from-image;
}

But neither seemed to work. the php option broke them completely, and the css option didn't fix the orientation.

Any ideas? Thanks :)

READ ALSO
Adapt the font size to the containing div

Adapt the font size to the containing div

I'm doing a dynamic website, and I'm developping on a 1920*1080 resolutionI have created a div that looks like that :

207
Converting Sass to LESS

Converting Sass to LESS

I'm building this component library and I want to produce stylesheets in 3 flavors: SCSS, LESS and CSS for the end user to use whatever they want

375
Make select2 boxes wide enough for contents

Make select2 boxes wide enough for contents

I have this table in jsfiddleI want the name column to be wide enough to fit the names available in the options without truncation

193