CODEWITHSUNDEEP
xamarin.formsxamarin.androidxamarin.ios
juicebyjustin
juicebyjustin

Reputation: 444

PNG with Transparent Background Turns Black in ImageSource

Edit: my issue was that in using SkiaSharp to scale down the image size I was encoding it as Jpeg instead of PNG. Encoding as PNG made the background transparent.

I am loading images from an HTTP endpoint, storing the image in a DB, and displaying the image in an ImageSource. I have a PNG with a transparent background. When the image is displayed the background turns black. I'm not sure where I'm going wrong.

Download Image as ByteArray and Convert to ImageSource

public ImageSource Image { get; set;} // NotifyPropertyChange is implemented

...

// download image
var client = new HttpClient();
var imageByteArray = await client.GetByteArrayAsync(url);

// convert ByteArray to ImageSource
Image = ImageSource.FromStream(() => new MemoryStream(imageByteArray));

XAML ImageSource

<Image x:Name="image"
       Source="{Binding Image}" />

Sqlite DB Model Property & Conversion from ByteArray to ImageSource

public byte[] ImageByteArray { get; set; }

...

// convert ByteArray to ImageSource in Model
Image = ImageSource.FromStream(() => new MemoryStream(ImageByteArray));

Upvotes: 1

Views: 581

Answers (1)

ToolmakerSteve
ToolmakerSteve

Reputation: 21321

Question-asker states in a comment that the actual problem was that they used SkiaSharp to scale the image to a smaller size. At that step, they encoded the resulting image in JPEG - so it no longer had transparency.

"Changing the encode to PNG fixed my issue."

As an aside, if transparency isn't there, its important to examine the process in every step from image creation to storing on server to transmitting to client to final display. Examine output of each step, to be sure it is still .png format, and has transparency. (E.g. take the bytes, store them in a file, manually view that file in an image viewer that shows transparent areas.)

Upvotes: 2

Related Questions