ASP.NET Core图片上传缩放时方向异常问题求助

这确实是移动端上传图片时的典型坑——手机拍照时会把「旋转校正信息」存在图片的EXIF元数据里，但System.Drawing的Bitmap默认加载时会忽略这个标签，直接按原始像素的方向渲染，导致图片看起来“侧转”或“倒立”。结合你的场景，我给你一套完整的解决方案：

核心问题分析 #

你遇到的差异（iPhone正常、Android倒立）本质是不同手机厂商的EXIF Orientation标签值不同：

• iPhone通常用6（顺时针旋转90度）
• 部分Android设备可能用3（旋转180度）或8（逆时针旋转90度）

你之前直接硬编码旋转的方式只能适配单一设备，必须通过读取EXIF的Orientation标签来动态处理。至于你说PropertyIdList为空，大概率是前端转Base64时丢失了EXIF（比如用canvas.toDataURL()处理过图片），如果是纯FileReader转换的Base64，后端应该能读到EXIF。

完整解决方案代码 #

我们分三步处理：读取EXIF方向、应用旋转校正、再执行缩放保存。

1. 读取EXIF的Orientation标签 #

private static int GetExifOrientation(Image image)
{
    const int exifOrientationTagId = 0x0112; // EXIF中Orientation标签的ID

    // 检查图片是否包含Orientation属性
    if (image.PropertyIdList.Contains(exifOrientationTagId))
    {
        var propertyItem = image.GetPropertyItem(exifOrientationTagId);
        // 解析标签值（1-8对应不同旋转/翻转状态）
        return BitConverter.ToUInt16(propertyItem.Value, 0);
    }

    // 默认返回1（正常方向，无需校正）
    return 1;
}

2. 根据Orientation校正图片方向 #

private static Image ApplyExifOrientationCorrection(Image image)
{
    int orientation = GetExifOrientation(image);

    switch (orientation)
    {
        case 1:
            // 正常方向，无需处理
            return image;
        case 2:
            // 水平翻转
            image.RotateFlip(RotateFlipType.RotateNoneFlipX);
            break;
        case 3:
            // 旋转180度
            image.RotateFlip(RotateFlipType.Rotate180FlipNone);
            break;
        case 4:
            // 垂直翻转
            image.RotateFlip(RotateFlipType.RotateNoneFlipY);
            break;
        case 5:
            // 顺时针转90度+水平翻转
            image.RotateFlip(RotateFlipType.Rotate90FlipX);
            break;
        case 6:
            // 顺时针转90度（iPhone常见情况）
            image.RotateFlip(RotateFlipType.Rotate90FlipNone);
            break;
        case 7:
            // 逆时针转90度+水平翻转
            image.RotateFlip(RotateFlipType.Rotate270FlipX);
            break;
        case 8:
            // 逆时针转90度（部分Android设备情况）
            image.RotateFlip(RotateFlipType.Rotate270FlipNone);
            break;
    }

    // 校正后移除Orientation标签，避免后续重复处理
    image.RemovePropertyItem(exifOrientationTagId);
    return image;
}

3. 修改缩放保存方法，先校正再缩放 #

private string ResizeAndSave(byte[] bytes) {
    Guid guid = Guid.NewGuid();
    string newFileName = $"{guid}.jpg";
    var saveDir = Path.Combine(_hostingEnvironment.WebRootPath, "images");
    
    if (!Directory.Exists(saveDir)) {
        Directory.CreateDirectory(saveDir);
    }

    using (var ms = new MemoryStream(bytes))
    {
        // 用Image而非Bitmap加载，确保能读取完整EXIF元数据
        using (var originalImage = Image.FromStream(ms))
        {
            // 第一步：应用EXIF方向校正
            var orientedImage = ApplyExifOrientationCorrection(originalImage);

            // 第二步：计算缩放参数（严格按480*680，保持比例居中显示）
            int targetWidth = 480;
            int targetHeight = 680;
            float scaleRatio = Math.Min(
                (float)targetWidth / orientedImage.Width,
                (float)targetHeight / orientedImage.Height
            );
            int scaledWidth = (int)(orientedImage.Width * scaleRatio);
            int scaledHeight = (int)(orientedImage.Height * scaleRatio);

            // 创建目标画布，填充白色避免空白区域
            var destImage = new Bitmap(targetWidth, targetHeight);
            destImage.SetResolution(orientedImage.HorizontalResolution, orientedImage.VerticalResolution);
            
            using (var graphics = Graphics.FromImage(destImage))
            {
                graphics.Clear(Color.White);
                graphics.CompositingMode = CompositingMode.SourceCopy;
                graphics.CompositingQuality = CompositingQuality.HighQuality;
                graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
                graphics.SmoothingMode = SmoothingMode.HighQuality;
                graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;

                // 居中绘制缩放后的图片
                int drawX = (targetWidth - scaledWidth) / 2;
                int drawY = (targetHeight - scaledHeight) / 2;
                graphics.DrawImage(orientedImage, new Rectangle(drawX, drawY, scaledWidth, scaledHeight), 
                                  0, 0, orientedImage.Width, orientedImage.Height, GraphicsUnit.Pixel);
            }

            destImage.Save(Path.Combine(saveDir, newFileName), ImageFormat.Jpeg);
        }
    }
    
    return newFileName;
}

额外注意事项 #

1. 如果还是读不到EXIF标签：
   • 检查前端是否用canvas处理过图片（canvas.toDataURL()会丢失EXIF），如果是，需要前端用exif-js等库读取Orientation并传给后端，后端直接用这个值校正。
2. 关于图片格式：
   • 如果上传的是PNG/WebP等格式，保存时要对应修改ImageFormat，避免格式转换导致的质量损失。

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