Xamarin Forms使用MediaPlugin拍照后裁剪图片显示方向异常问题

这个问题我之前在项目里也踩过坑！MediaPlugin的裁剪功能在处理竖屏拍摄的照片时，很容易丢失Exif方向元数据，导致Image控件显示时图片被错误旋转——明明是竖屏拍的，裁剪后却变成横屏显示。下面是我亲测有效的解决思路和代码示例：

问题根源 #

当你开启allowCropping=true后，裁剪操作会生成一张新的图片，但这个新图片往往会丢失原图携带的Exif方向标记。而未裁剪时，Image控件（或底层渲染引擎）会读取原图的Exif信息自动调整显示方向，所以看起来正常；裁剪后没有了这个标记，控件就会按照图片的原始像素方向渲染，导致方向错误。

解决方案：手动读取并应用Exif方向 #

我们可以在获取裁剪后的图片后，手动读取它的Exif方向信息，然后将图片旋转到正确的方向，再交给Image控件显示。这里推荐用SkiaSharp来处理图片操作，它跨平台且API友好：

步骤1：安装SkiaSharp包 #

在你的项目中安装SkiaSharp NuGet包：

Install-Package SkiaSharp

步骤2：编写图片旋转处理方法 #

using SkiaSharp;
using System.IO;

public static SKBitmap FixImageOrientation(string imagePath)
{
    using var stream = new FileStream(imagePath, FileMode.Open, FileAccess.Read);
    // 获取图片的Exif编码方向
    var codec = SKCodec.Create(stream);
    var exifOrientation = codec.EncodedOrigin;

    // 重新解码图片
    stream.Position = 0;
    using var originalBitmap = SKBitmap.Decode(stream);

    // 根据Exif方向旋转/翻转图片
    SKBitmap fixedBitmap = originalBitmap;
    switch (exifOrientation)
    {
        case SKEncodedOrigin.TopRight:
            fixedBitmap = originalBitmap.RotateFlip(SKBitmapRotateFlipType.RotateNoneFlipX);
            break;
        case SKEncodedOrigin.BottomRight:
            fixedBitmap = originalBitmap.RotateFlip(SKBitmapRotateFlipType.Rotate180FlipNone);
            break;
        case SKEncodedOrigin.BottomLeft:
            fixedBitmap = originalBitmap.RotateFlip(SKBitmapRotateFlipType.Rotate180FlipX);
            break;
        case SKEncodedOrigin.LeftTop:
            fixedBitmap = originalBitmap.RotateFlip(SKBitmapRotateFlipType.Rotate90FlipX);
            break;
        case SKEncodedOrigin.RightTop:
            fixedBitmap = originalBitmap.RotateFlip(SKBitmapRotateFlipType.Rotate90FlipNone);
            break;
        case SKEncodedOrigin.RightBottom:
            fixedBitmap = originalBitmap.RotateFlip(SKBitmapRotateFlipType.Rotate270FlipX);
            break;
        case SKEncodedOrigin.LeftBottom:
            fixedBitmap = originalBitmap.RotateFlip(SKBitmapRotateFlipType.Rotate270FlipNone);
            break;
        // TopLeft是正常方向，无需处理
    }

    return fixedBitmap;
}

步骤3：将处理后的图片绑定到Image控件 #

调用上面的方法处理裁剪后的图片，再转换为Image控件可识别的ImageSource：

// 假设croppedImagePath是MediaPlugin返回的裁剪后图片路径
var fixedBitmap = FixImageOrientation(croppedImagePath);

// 将SKBitmap转换为Stream，再转为ImageSource
using var memoryStream = new MemoryStream();
fixedBitmap.Encode(SKEncodedImageFormat.Png, 100).SaveTo(memoryStream);
memoryStream.Position = 0;

MyImageControl.Source = ImageSource.FromStream(() => memoryStream);

额外注意事项 #

• 记得在使用完SKBitmap后及时释放资源，避免内存泄漏；
• 测试不同品牌的设备，部分相机的Exif标记可能有细微差异，确保覆盖所有方向情况；
• 如果你的项目已经使用了其他图像处理库（如ImageSharp），也可以用类似的逻辑读取Exif方向并处理。

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