ImageEditor: Some images are rotated initially, when displaying in the editor

ADMIN

Lance | Senior Manager Technical Support

Posted on: 07 Jan 2025 16:31

Hi Nico,

I'm happy it helped!

As to the service, that's a valid request. So that it isn't intermixed with this Bug Report, I have created a separate Feature Request on your behalf https://feedback.telerik.com/maui/1675055-expose-image-processing-engine-as-a-service (I already upvoted for you).

Regards,
Lance | Senior Manager Technical Support
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ADMIN

Didi

Posted on: 07 Jan 2025 16:29

Hello Nico,

The modified image should be passed to the ImageEditor.Source. The control loads and displays images. In general, the issue is related to the way how the image is processed using the SkiaSharp library. Use the workaround to solve the behavior until a fix for this issue is provided.

Regarding to a kb article, we prefer to keep the workaround in the public bug report. Once the issue is fixed the workaround should be removed from the code.

Regards,
Didi
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Nico

Posted on: 07 Jan 2025 15:17

Thanks Lance, that helps me a lot.
Maybe you can make the ImageService available as a public property and give the option to set a custom ImageLoader there

ADMIN

Lance | Senior Manager Technical Support

Posted on: 07 Jan 2025 15:08

Hi Nico,

Rei shared the code you need to process the image before you give it to the ImageEditor. If you're asking how to use SkiaSharp, this is a bit outside the scope of what we can help with.

However, I can explain the steps so that it makes more sense, then you can decide how to use it in your project.

Implement Rei's helper methods
Process the image
Hand-off the processed image to the image editor

private void LoadImage_Clicked(object sender, EventArgs e)
{
    // SkiaSharp-related code (STEP #2 FROM MY LIST)
    using var imageStream = File.OpenRead("MyImage.png");
    var bitmap = LoadBitmapWithOrigin(imageStream, out var origin);
    var rotatedBitmap = AutoOrient(bitmap, origin);
    SKImage image = SKImage.FromPixels(rotatedBitmap.PeekPixels());

    // Telerik-related code (STEP #3 FROM MY LIST)
    imageEditor.Source = ImageSource.FromStream(()=> image.Encode().AsStream());
}

As far as a KB goes, I'll discuss it with the MAUI team on how we might be able to present it in an article that is helpful. While EXIF data is affecting the ImageEditor's display, the fundamental topic from the code is not related (it is just using SkiaSharp to edit the EXIF data to re-rotate the image). Thank you for the suggestion!

Regards,
Lance | Senior Manager Technical Support
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Nico

Posted on: 07 Jan 2025 14:36

Are your able to share some infos on how to use this workaround? KB article?
Need this urgently

thx
Nico

ADMIN

Yana

Posted on: 25 Apr 2024 06:04

Hi Rei,

Thank you for sharing the solution you found. Indeed, manually rotating the image resolves the issue with not displaying it correctly in the ImageEditor.

Regards,
Yana
Progress Telerik

A brand new ThemeBuilder course was just added to the Virtual Classroom. The training course was designed to help you get started with ThemeBuilder for styling Telerik and Kendo UI components for your applications. You can check it out at https://learn.telerik.com

Rei

Posted on: 24 Apr 2024 14:16

Thank you Yana for this insight. I was able to find a workaround on SkiaSharp's issues. It works by creating a SKCodec from the image stream, finding the SKEncodedOrigin, and creating a method that rotates the bitmap based on the encodedorigin information. Code below will hopefully be helpful for others:

public SKBitmap LoadBitmapWithOrigin(Stream imageStream, out SKEncodedOrigin origin)
{
// Reset stream position
if (imageStream.CanSeek)
imageStream.Seek(0, SeekOrigin.Begin);

try
{
using (var codec = SKCodec.Create(imageStream))
{
if (codec == null)
{
origin = SKEncodedOrigin.Default; // Default origin if codec creation failed
return null; // Early exit if the image format is unrecognized
}

origin = codec.EncodedOrigin; // Get the encoded origin
var info = new SKImageInfo(codec.Info.Width, codec.Info.Height);
var bitmap = SKBitmap.Decode(codec, info);
if (bitmap == null)
{
throw new InvalidOperationException("Failed to decode the bitmap.");
}

return bitmap;
}
}
catch (Exception ex)
{
// Log the exception or handle it according to your application's error handling policies
origin = SKEncodedOrigin.Default; // Set default origin in case of failure
Console.WriteLine($"Error loading bitmap: {ex.Message}");
return null;
}
}

public static SKBitmap? AutoOrient(SKBitmap bitmap, SKEncodedOrigin origin)
{
SKBitmap rotated;
switch (origin)
{
case SKEncodedOrigin.BottomRight:
rotated = new SKBitmap(bitmap.Width, bitmap.Height);
using (var surface = new SKCanvas(rotated))
{
surface.RotateDegrees(180, bitmap.Width / 2, bitmap.Height / 2);
surface.DrawBitmap(bitmap, 0, 0);
}
return rotated;
case SKEncodedOrigin.RightTop:
rotated = new SKBitmap(bitmap.Height, bitmap.Width);
using (var surface = new SKCanvas(rotated))
{
surface.Translate(rotated.Width, 0);
surface.RotateDegrees(90);
surface.DrawBitmap(bitmap, 0, 0);
}
return rotated;
case SKEncodedOrigin.LeftBottom:
rotated = new SKBitmap(bitmap.Height, bitmap.Width);
using (var surface = new SKCanvas(rotated))
{
surface.Translate(0, rotated.Height);
surface.RotateDegrees(270);
surface.DrawBitmap(bitmap, 0, 0);
}
return rotated;
default:
return bitmap;
}
}

ADMIN

Yana

Posted on: 24 Apr 2024 11:46

Hello Rei,

Thank you for sending your feedback. This issue is related to a limitation in the SkiaSharp library we use internally - the EXIF data is not taken into account.

I understand this could be annoying to the app users and I've updated the issue priority in our backlog. Please follow the feedback item to get email notifications on status changes.

Regards,
Yana
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Rei

Posted on: 23 Apr 2024 15:19

I'm experiencing this exact issue. We will be using another tool to implement image editing until this is resolved.

ADMIN

Yana

Posted on: 07 Mar 2024 15:04

Hello Patrick,

Thank you for your feedback on this. I am so sorry to hear this issue impacts the user experience in such a way.

The issue is not in our immediate plans, still, I raised its priority per your comment and we'll have it in mind.

I am sorry for the caused inconvenience.

Regards,
Yana
Progress Telerik

A brand new ThemeBuilder course was just added to the Virtual Classroom. The training course was designed to help you get started with ThemeBuilder for styling Telerik and Kendo UI components for your applications. You can check it out at https://learn.telerik.com

Patrick

Posted on: 07 Mar 2024 14:23

This behavior is really frustrating and annoys our users tremendously. Are there any plans on solving this issue in the near future?