Image flipping when convert image to base64

StackOverflow https://stackoverflow.com/questions/13814570

Question

I have a rectangle and fill it with a image 

 <Rectangle Height="95" Fill="{Binding Path=Image,RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay,Converter={StaticResource ConvertBase64toImage}}" Stroke="{x:Null}" x:Name="EditPhotoRectangel">
       <Rectangle.BitmapEffect>
           <DropShadowBitmapEffect ShadowDepth="7" Softness="0.75"/>
       </Rectangle.BitmapEffect>
 </Rectangle>

Image is a base64 string that i set image for it.

 private string ImageToBase64(System.Drawing.Image image, ImageFormat format)
    {
        using (MemoryStream ms = new MemoryStream())
        {
            // Convert Image to byte[]
            image.Save(ms, format);
            byte[] imageBytes = ms.ToArray();

            // Convert byte[] to Base64 String
            string base64String = Convert.ToBase64String(imageBytes);
            return base64String;
        }
    }

and use a converter for convert Base64 to imagebrush for fill rectangle .

 ImageBrush brush = new ImageBrush();
 BitmapImage bitmap = new BitmapImage();
 // convert base64string to byte[].
 byte[] binaryData = System.Convert.FromBase64String((string)value);
 bitmap.BeginInit();
 // Initializes a new non-resizable instance of the MemoryStream class based on the binaryData array.
 bitmap.StreamSource = new MemoryStream(binaryData);
 bitmap.EndInit();
 //set bitmapimage for brush imagesource 
 brush.ImageSource = bitmap;
 return brush;

My problem is: when I selected a image for this Rectangle fill with myimage flipping.

Was it helpful?

Solution 2

I use

 FlowDirection="LeftToRight"

it is work for me :)

OTHER TIPS

This is just a wild guess...need to write a sample to confirm...

I notice you are using System.Drawing.Image to encode the source bitmap binary data and System.Windows.Media.BitmapImage for the deserialization of the binary data.

There must be some difference in support between the encoders/decoders in the GDI+ (WinForms) world, and WPF (DirectX)....in particular you might have issues if you are using ImageFormat.MemoryBmp, or myimage.RawFormat (i.e. the property exposed on an Image).

It just so happens that DIBs (device independent bitmaps) usually have their scanlines stored in a bottom to top fashion i.e. upside down (negative stride).

So it could be to do with the way you created/initialized the System.Drawing.Bitmap that is the source of this whole process....maybe you used CopyPixels...which pointed to data where the pixels where in bottom to top arrangement or vice versa.

Have you tried doing a .Save to a physical BMP or JPEG file on that incoming Bitmap to see if it's the right way around (you can even do that in the debugger).

If you can't track down the cause of this conversion fiasco, then some possible solutions are:

  • do the necessary transform to flip your image back to the appropriate way or
  • use a different ImageFormat/create the incoming Bitmap in a different way or
  • when you deserialize the base64 data back into a bitmap use the System.Drawing.Image class again (so you used the same type of class on both ends of the serialization process), but then convert that object into a BitmapImage object.

If you can provide more detail on how you are creating the incoming System.Drawing.Bitmap that would help i.e. are you loading it from a file (which format is it?), or you created one then drew onto it via a Graphics context, or you used CopyPixels and copied the raw pixel data from somewhere (e.g. from out of a DIB which usually stores the scan lines bottom to top).

Some informational links:

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top