WPF Canvas to animated gif with transparent background to display on svg canvas - wpf

Question

In my web project, I need dynamically render XAML frames to animated gif. It's working now - I'm rendering each frame to png with this code:
// Save current canvas transform
var transform = surface.LayoutTransform;
// reset current transform (in case it is scaled or rotated)
surface.LayoutTransform = null;
// Get the size of canvas
var size = new System.Windows.Size(surface.Width, surface.Height);
// Measure and arrange the surface
// VERY IMPORTANT
surface.Measure(size);
surface.Arrange(new Rect(size));
// Create a render bitmap and push the surface to it
var renderBitmap =
new RenderTargetBitmap(
(int)size.Width,
(int)size.Height,
96d,
96d,
PixelFormats.Pbgra32);
renderBitmap.Render(surface);
Bitmap bmp;
// Create a file stream for saving image
using (var stream = new MemoryStream()) {
// Use png encoder for our data
var encoder = new PngBitmapEncoder();
// push the rendered bitmap to it
encoder.Frames.Add(BitmapFrame.Create(renderBitmap));
// save the data to the stream
encoder.Save(stream);
bmp = new Bitmap(stream);
}
return bmp;
and then creating animated gif with MagickImage.
But when I'm putting it on a web page (on svg canvas), background isn't transparent, but black.
How to make it transparent?

Answer 1

You have to ensure that you have the transparent flag set. You will also have to get the index of the transparent colour and ensure that is set as well and ensure that all transparent pixels index the transparent colour index (note the transparent pixel can have any RGB value).
I had a look at the MagickImage documentation and it gave me nothing on GIF. Then I looked at your code again and you are encoding a png not a gif. I found the gif info and well maybe you gave an intermediate step. The API does not have anything about GIF all I can do is give you the details on the gif data block so you can find the correct flags and settings yourself.
The stuff you have to change is in the GCE block before the start of every image data block.
Correct settings for transparent
options.delay = 2; //what ever you want Dont go under 2 as many gif renderers are limited to 50frames a second. Frame delay in 1/100 secs
options.transparentFlag = true; // This must be true for transparent
options.transparentIndex = transColour; //The 8 bit index of the transparent colour
// this must be set correctly for transparent to work.
options.dispose = 3; //use 3 or 2 if you want transparency;
Writing the GCE block
// the following is writing the GCE block that must be included before every image
// write writes an array or single byte to the stream
// shortData creates a Little-endian 16 bit short (high byte first) byte array
//
GCE_ID = 0xf9; // GCE block indentifier
GCE_size = 4; // block length
write([0x21 , GCE_ID , GCE_size]); // extension introducer
write(
0 + // bits 8:7 reserved
(options.dispose << 2) + // bits 5:4:3:2 disposal method
(options.transparentFlag?1:0)); // 1 transparency flag
write( shortData(options.delay) ); // delay x 1/100 sec
write( options.transparentIndex ); // transparent color index
write(0); // block terminator
// image block follows
Not the type of answer you are after but I don't think you are saving gifs. If you are than you should be able to find out what to set so that the correct GCE blocks are written to the gif file. Last note. Use a different colour index for the background colour than you use for the transparent index. I reserve the last two indexes of the global RGB lookup table for background and transparent.