Implementing the APNG Render Function

Question

Hey everyone, So, I'm currently trying the implement the APNG Specification, but am having some trouble with the frame rendering. My function is

    private void UpdateUI()
    {
        foreach (PictureBox pb in pics)
        {
            APNGBox box = (APNGBox)pb.Tag;
            APNGLib.APNG png = box.png;
            if (box.buffer == null)
            {
                box.buffer = new Bitmap((int)png.Width, (int)png.Height);
            }
            APNGLib.Frame f = png.GetFrame(box.frameNum);
            using (Graphics g = Graphics.FromImage(box.buffer))
            {
                switch (f.DisposeOp)
                {
                    case APNGLib.Frame.DisposeOperation.NONE:
                        break;
                    case APNGLib.Frame.DisposeOperation.BACKGROUND:
                        g.Clear(Color.Transparent);
                        break;
                    case APNGLib.Frame.DisposeOperation.PREVIOUS:
                        if (box.prevBuffer != null)
                        {
                            g.DrawImage(box.prevBuffer, Point.Empty);
                        }
                        else
                        {
                            g.Clear(Color.Transparent);
                        }
                        break;
                    default:
                        break;
                }
                Bitmap read = png.ToBitmap(box.frameNum++);
                switch (f.BlendOp)
                {
                    case APNGLib.Frame.BlendOperation.OVER:
                        g.CompositingMode = System.Drawing.Drawing2D.CompositingMode.SourceOver;
                        break;
                    case APNGLib.Frame.BlendOperation.SOURCE:
                        g.CompositingMode = System.Drawing.Drawing2D.CompositingMode.SourceCopy;
                        break;
                    default:
                        break;
                }
                g.DrawImage(read, new Point((int)f.XOffset, (int)f.YOffset));
            }

            box.prevBuffer = box.buffer;
            pb.Image = box.buffer;

            if (box.frameNum >= box.png.FrameCount)
            {
                box.frameNum = 0;
                box.buffer = null;
                box.prevBuffer = null;
            }
        }
    }

The APNGBox is

internal class APNGBox
    {
        public int frameNum = 0;
        public APNGLib.APNG png;
        public Bitmap buffer;
        public Bitmap prevBuffer;
    }

I think that this is mostly correct, as I've run it against all the images in the APNG Gallery. However, some of them are rendering incorrectly (This one has artifacting issues, and this one does not retain the red bar on the left consistently). Please note, you'll have the view the page in Firefox 3 or higher to view the animations.

I'm lead to believe the issue has to do with how I handle the DISPOSE_OP_PREVIOUS, but I can't figure out what I'm doing wrong. Can anyone suggest what I might be missing?

Fritter

Answer 1

So, I was able to figure it out in the end, and will post here in case anyone in the future comes across a similar problem. Turns out the issue was largely threefold:

1. One should not change the 'previous buffer' if the frame type is 'PREVIOUS'
2. One should use the previous frame's dispose_op, not the dispose_op of the current frame, to determine how it disposes
3. One should be sure to dispose only the old frame's region, not the whole frame

The new code is:

    internal class APNGBox
    {
        public int frameNum { get; set; }
        public APNGLib.APNG apng { get; set; }
        public Bitmap buffer { get; set; }
        public Bitmap prevBuffer { get; set; }

        public APNGBox(APNGLib.APNG png)
        {
            frameNum = 0;
            apng = png;
            buffer = apng.ToBitmap(0);
            prevBuffer = null;
        }
    }

    private void UpdateUI()
    {
        foreach (PictureBox pb in pics)
        {
            APNGBox box = (APNGBox)pb.Tag;
            APNGLib.APNG png = box.apng;
            if (!png.IsAnimated)
            {
                if (pb.Image == null)
                {
                    pb.Image = png.ToBitmap();
                }
            }
            else
            {
                if (box.frameNum != png.FrameCount - 1)
                {
                    Bitmap prev = box.prevBuffer == null ? null : new Bitmap(box.prevBuffer);
                    APNGLib.Frame f1 = png.GetFrame(box.frameNum);
                    if (f1.DisposeOp != APNGLib.Frame.DisposeOperation.PREVIOUS)
                    {
                        box.prevBuffer = new Bitmap(box.buffer);
                    }
                    DisposeBuffer(box.buffer, new Rectangle((int)f1.XOffset, (int)f1.YOffset, (int)f1.Width, (int)f1.Height), f1.DisposeOp, prev);
                    box.frameNum++;
                    APNGLib.Frame f2 = png.GetFrame(box.frameNum);
                    RenderNextFrame(box.buffer, new Point((int)f2.XOffset, (int)f2.YOffset), png.ToBitmap(box.frameNum), f2.BlendOp);
                }
                else
                {
                    box.frameNum = 0;
                    box.prevBuffer = null;
                    ClearFrame(box.buffer);
                    RenderNextFrame(box.buffer, Point.Empty, png.ToBitmap(box.frameNum), APNGLib.Frame.BlendOperation.SOURCE);
                }
                pb.Invalidate();
            }
        }
    }

    private void DisposeBuffer(Bitmap buffer, Rectangle region, APNGLib.Frame.DisposeOperation dispose, Bitmap prevBuffer)
    {
        using (Graphics g = Graphics.FromImage(buffer))
        {
            g.CompositingMode = System.Drawing.Drawing2D.CompositingMode.SourceCopy;

            Brush b = new SolidBrush(Color.Transparent);
            switch (dispose)
            {
                case APNGLib.Frame.DisposeOperation.NONE:
                    break;
                case APNGLib.Frame.DisposeOperation.BACKGROUND:
                    g.FillRectangle(b, region);
                    break;
                case APNGLib.Frame.DisposeOperation.PREVIOUS:
                    if(prevBuffer != null)
                    {
                        g.FillRectangle(b, region);
                        g.DrawImage(prevBuffer, region, region, GraphicsUnit.Pixel);
                    }
                    break;
                default:
                    break;
            }
        }
    }

    private void RenderNextFrame(Bitmap buffer, Point point, Bitmap nextFrame, APNGLib.Frame.BlendOperation blend)
    {
        using(Graphics g = Graphics.FromImage(buffer))
        {
            switch(blend)
            {
                case APNGLib.Frame.BlendOperation.OVER:
                    g.CompositingMode = System.Drawing.Drawing2D.CompositingMode.SourceOver;
                    break;
                case APNGLib.Frame.BlendOperation.SOURCE:
                    g.CompositingMode = System.Drawing.Drawing2D.CompositingMode.SourceCopy;
                    break;
                default:
                    break;
            }
            g.DrawImage(nextFrame, point);
        }
    }

    private void ClearFrame(Bitmap buffer)
    {
        using(Graphics g = Graphics.FromImage(buffer))
        {
            g.Clear(Color.Transparent);
        }
    }

Fritter

Hi, do you have a complete working source code to provide please ? I would like to display apng in my winforms application. Thanks. – Espinoza

It's been a while since I last worked on these, but I coded up some demos here: github.com/murrple-1/APNGManagement. Also, I'm pretty sure I was new to .net/C# at the time, so there's no NuGet for the dependencies (I should do that sometime though) – Fritter

@dede Added the NuGet support just now. The APNGViewer app should be useful for you – Fritter