PHP多图上传竖屏图片旋转异常，求Exif修正时机指导

Hey there! Let's figure out how to get that vertical image rotation sorted out once and for all. I’ve dealt with this exact issue before—Windows does the friendly auto-rotation for you, but servers don’t read those Exif orientation tags by default, which leaves your images looking sideways on the front end.

Since you already have a fixExif script that handles rotation based on Exif data, the key is knowing when to trigger it in your upload workflow. Here’s the breakdown of the best spots to integrate it:

1. Server-Side: Fix Before Saving (Recommended) #

This is the most reliable approach because you correct the image once, and every subsequent use (display, download, etc.) will show it correctly without extra work. You want to run your rotation logic right after the file is uploaded to the server’s temporary storage, but before you save it to its final destination.

Let’s say your upload script is in PHP (super common with Apache). Here’s how to slot in your fixExif function:

// Your existing fixExif rotation function (adjust if needed)
function fixExifOrientation($imagePath) {
    // Read Exif data
    $exif = exif_read_data($imagePath);
    if (!empty($exif['Orientation'])) {
        // Create image resource from the file
        $image = imagecreatefromjpeg($imagePath);
        
        // Rotate based on orientation tag
        switch ($exif['Orientation']) {
            case 3: // 180 degrees
                $image = imagerotate($image, 180, 0);
                break;
            case 6: // 90 degrees counter-clockwise
                $image = imagerotate($image, -90, 0);
                break;
            case 8: // 90 degrees clockwise
                $image = imagerotate($image, 90, 0);
                break;
        }
        
        // Overwrite the original image with the corrected version
        imagejpeg($image, $imagePath);
        imagedestroy($image);
    }
}

// Your multi-upload handling workflow
if (!empty($_FILES['images'])) {
    foreach ($_FILES['images']['tmp_name'] as $index => $tempFilePath) {
        // Define where you want to save the final image
        $finalFilePath = 'uploads/' . $_FILES['images']['name'][$index];
        
        // First, move the temp file to its final location
        move_uploaded_file($tempFilePath, $finalFilePath);
        
        // 🔥 Critical step: Run the Exif rotation fix here
        fixExifOrientation($finalFilePath);
        
        // Now you can proceed with database entries or other post-upload tasks
    }
}

Why this works: By fixing the image immediately after upload, you’re ensuring the file stored on your server is already rotated correctly. No more sideways images when you render them in your pages!

2. Front-End: Fix for Previews (If Needed) #

If you’re also seeing rotated images in your upload preview (before even sending the file to the server), you’ll want to add a front-end fix too. Use JavaScript to read the Exif orientation tag from the file, then adjust the preview using a canvas.

Here’s a quick example using basic Exif handling (you can use a lightweight library like exif-js for easier data reading):

function fixPreviewOrientation(file, onPreviewReady) {
    const reader = new FileReader();
    
    reader.onload = function(e) {
        const img = new Image();
        img.src = e.target.result;
        
        img.onload = function() {
            // Read Exif orientation tag (using exif-js library here)
            EXIF.getData(img, function() {
                const orientation = EXIF.getTag(this, 'Orientation');
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                
                // Adjust canvas dimensions and rotation based on orientation
                switch (orientation) {
                    case 3:
                    case 4:
                        canvas.width = img.width;
                        canvas.height = img.height;
                        ctx.rotate(Math.PI);
                        ctx.drawImage(img, -img.width, -img.height);
                        break;
                    case 6:
                    case 7:
                        canvas.width = img.height;
                        canvas.height = img.width;
                        ctx.rotate(Math.PI / 2);
                        ctx.drawImage(img, 0, -img.height);
                        break;
                    case 8:
                    case 9:
                        canvas.width = img.height;
                        canvas.height = img.width;
                        ctx.rotate(-Math.PI / 2);
                        ctx.drawImage(img, -img.width, 0);
                        break;
                    default:
                        canvas.width = img.width;
                        canvas.height = img.height;
                        ctx.drawImage(img, 0, 0);
                }
                
                // Pass the corrected preview URL to your callback
                onPreviewReady(canvas.toDataURL(file.type));
            });
        };
    };
    
    reader.readAsDataURL(file);
}

// Example usage with your upload input
document.querySelector('#image-upload').addEventListener('change', function(e) {
    const files = e.target.files;
    for (const file of files) {
        fixPreviewOrientation(file, function(previewUrl) {
            const previewImg = document.createElement('img');
            previewImg.src = previewUrl;
            document.querySelector('#preview-container').appendChild(previewImg);
        });
    }
});

Quick Recap #

• Server-side fix: Run your fixExif function right after moving the uploaded file to its final storage path. This solves the problem for all future uses of the image.
• Front-end fix: If previews are rotated, fix them before displaying using canvas and Exif data.

This should cover both scenarios and get your vertical images displaying correctly across Windows and Apache environments.

内容的提问来源于stack exchange，提问作者Zeepblok