WPF Canvas 到具有透明背景的动画 gif 以显示在 svg 画布上答案

【问题标题】：WPF Canvas to animated gif with transparent background to display on svg canvasWPF Canvas 到具有透明背景的动画 gif 以显示在 svg 画布上
【发布时间】：2015-11-02 16:07:38
【问题描述】：

在我的 Web 项目中，我需要将 XAML 帧动态呈现为动画 gif。它现在正在工作 - 我正在使用以下代码将每一帧渲染为 png：

        // 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;

然后使用 MagickImage 创建动画 gif。但是当我将它放在网页上（在 svg 画布上）时，背景不是透明的，而是黑色的。如何让它透明？

【问题讨论】：

标签： wpf canvas svg gif transparent

【解决方案1】：

您必须确保设置了透明标志。您还必须获取透明颜色的索引并确保它也已设置，并确保所有透明像素都索引透明颜色索引（注意透明像素可以具有任何 RGB 值）。

我查看了 MagickImage 文档，但它没有给我任何关于 GIF 的信息。然后我再次查看了您的代码，您正在编码 png 而不是 gif。我找到了 gif 信息，也许你提供了一个中间步骤。 API 没有任何关于 GIF 的信息，我所能做的就是为您提供有关 gif 数据块的详细信息，以便您自己找到正确的标志和设置。

您必须更改的内容是在每个图像数据块开始之前的 GCE 块中。

透明的正确设置

 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;

编写 GCE 块

// 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

不是您想要的答案类型，但我认为您不会保存 gif。如果你不是，你应该能够找出要设置的内容，以便将正确的 GCE 块写入 gif 文件。最后一点。对背景颜色使用与透明索引不同的颜色索引。我将全局 RGB 查找表的最后两个索引保留为背景和透明。

【讨论】：