3.x version of the library replaces white pixels with transparent

[DarkDaskin]

I try to update my code involving drawing animated resized images to the latest version of the library. It required some changes, but I managed to get almost the same image with one big exception: by some reason all white pixels are replaced to transparent. See these images for comparison (although you might not actually see the difference on white background):

Note that the first frame is correct, but all subsequent frames have this issue. This is very strange to me, as I create all frames in a loop and the first frame should not differ.

How can I avoid this problem?

Here is my updated code:

public async Task<Stream> GenerateImageAsync(Stream inputStream, string handName)
{
    // ReSharper disable AccessToDisposedClosure
    // ReSharper disable AccessToModifiedClosure

    var handImages = await LoadHandImagesAsync(handName);
    try
    {
        using var inputImage = await Image.LoadAsync(inputStream);
        using var outputImage = new Image<Rgba32>(handImages[0].Width, handImages[0].Height);
        var clipInside = new DrawingOptions { ShapeOptions = new() { BooleanOperation = BooleanOperation.Intersection } };
        
        for (var i = 0; i < handImages.Length; i++)
        {
            using var frameImage = new Image<Rgba32>(handImages[i].Width, handImages[i].Height);
            var scaleFactor = settings.Value.ScaleFactor;
            var squashFactorY = 1 - i * settings.Value.SquashStepFactor;
            frameImage.Mutate(context => context.Paint(canvas => 
            {
                canvas.Fill(Brushes.Solid(Color.Gray));

                var targetRect = new RectangleF(
                    (frameImage.Width - frameImage.Width * scaleFactor) / 2,
                    frameImage.Height * ((1 - scaleFactor) / 2 + scaleFactor * (1 - squashFactorY)),
                    frameImage.Width * scaleFactor,
                    frameImage.Height * scaleFactor * squashFactorY);
                var mask = new EllipsePolygon(
                    targetRect.X + targetRect.Width / 2,
                    targetRect.Y + targetRect.Height / 2,
                    targetRect.Width, 
                    targetRect.Height);
                canvas.Save(clipInside, mask);
                canvas.DrawImage(inputImage, inputImage.Bounds, targetRect);
                canvas.Restore();

                canvas.DrawImage(handImages[i], handImages[i].Bounds, frameImage.Bounds);
            }));
            var outputFrame = outputImage.Frames.AddFrame(frameImage.Frames.RootFrame);
            var gifFrameMetadata = outputFrame.Metadata.GetGifMetadata();
            gifFrameMetadata.FrameDelay = 4;
            gifFrameMetadata.DisposalMode = FrameDisposalMode.RestoreToBackground;
        }

        // Add backwards animation frames (excluding the first frame to avoid duplication)
        for (var i = handImages.Length - 1; i > 0; i--)
            outputImage.Frames.AddFrame(outputImage.Frames[i]);

        outputImage.Frames.RemoveFrame(0); // Remove the initial empty frame
        var gifMetadata = outputImage.Metadata.GetGifMetadata();
        gifMetadata.RepeatCount = 0; // Loop indefinitely

        var outputStream = new MemoryStream();
        await outputImage.SaveAsGifAsync(outputStream);
        await outputImage.SaveAsGifAsync(@"E:\Temp\patpat.gif");
        outputStream.Position = 0;
        return outputStream;
    }
    finally
    {
        foreach (var handImage in handImages)
            handImage.Dispose();
    }
}

[JimBobSquarePants]

I think this might be a quantization change not anything to do with the drawing library. The quantizer changed between versions and matches full alpha better.

I suspect your input frames do in fact differ alpha wise and the transparent pixels are FFFFFF00.

If you can upload your input images and target dimensions I’ll have a look when I can.

[DarkDaskin]

What is strange is that as I updated the code with some coordinate rounding, the problem on this specific input image went away, but started to appear again when I changed the input image to a different one. So it is somehow related to drawing as well.

Here is a piece of updated code:

var targetRect = new RectangleF(
    MathF.Round(frameImage.Width - frameImage.Width * scaleFactor) / 2,
    MathF.Round(frameImage.Height * ((1 - scaleFactor) / 2 + scaleFactor * (1 - squashFactorY))),
    MathF.Round(frameImage.Width * scaleFactor),
    MathF.Round(frameImage.Height * scaleFactor * squashFactorY));

[JimBobSquarePants]

That simply changes the sampling target. Did you examine the output frames?

I still need the size you are resizing the image to. That absolutely matters as it affects colors.

[DarkDaskin]

The sizes are calculated from the following settings:

public float ScaleFactor { get; set; } = 0.8f;
public float SquashStepFactor { get; set; } = 0.04f;

The targetRects for frames 0 and 1 are {RectangleF [ X=25,599998, Y=25,599998, Width=204,8, Height=204,8 ]} and {RectangleF [ X=25,599998, Y=33,792004, Width=204,8, Height=196,608 ]} accordingly.

In both cases the output frames have no transparent pixels at all and white areas are FFFFFFFF.

Additionally I did a simple test where I loaded the saved frames from disk and added them to a GIF. There was no transparency problem, so it seems that the faulty state only exists in memory of generated frames. Then I inspected the pixels in memory using frameImage.ProcessPixelRows, but found no transparent pixels either.

[JimBobSquarePants]

As I suspected this was a quantization issue. I've opened a PR in ImageSharp SixLabors/ImageSharp#3133 which fixes it and will deploy updates soon.

Just to note, because the new code is more accurate and the max sits exactly on the resize boundary you should shrink the ellipse width/height slightly to prevent transparency due to aliasing at resize boundary.

e.g.

EllipsePolygon mask = new(
    targetRect.X + (targetRect.Width / 2),
    targetRect.Y + (targetRect.Height / 2),
    targetRect.Width * .99F,
    targetRect.Height * .99F);