Anti-aliasing and distortion observed while creating transparent GIFs

[nis4nilesh]

Hi,

I am trying to make a transparent GIF, however, I am observing that text is looking distorted with Anti-aliasing when image is rendered. In my case, I am rendering image on the browser.

I am using latest binary (Magick.NET-Q8-AnyCPU.7.0.4.400), which I downloaded from the Nuget.Org. I am coding in C# .NET. Here is my source code.

Below are the core methods to generate image frames and converting them to byte array.

Code: Select all

        public static byte[] GenerateCountdown(DateTime processingDateTime, int numberOfFrames)
        {
            byte[] result = null;

            using (MagickImageCollection collection = new MagickImageCollection())
            {
                Stopwatch stopwatch = new Stopwatch();
                stopwatch.Start();
                collection.AddRange(GenerateFrames(DateTime.Now, numberOfFrames));
                stopwatch.Stop();

                stopwatch.Restart();
                result = collection.ToByteArray(MagickFormat.Gif);

                stopwatch.Stop();
            }

            return result;
        }        

        private static IEnumerable<MagickImage> GenerateFrames(DateTime processingDateTime, int numberOfFrames)
        {
            List<MagickImage> magickImageList = new List<MagickImage>();            

            for (int i = 0; i < numberOfFrames; ++i)
            {
                DateTime dt = processingDateTime.AddSeconds(i);                

                string text = "Countdown " + i;

                MagickImage frame = null;

                if (!string.IsNullOrEmpty(text))
                {
                    try
                    {
                        frame = new MagickImage(MagickColors.Transparent, 200, 40);
                        frame.WriteText(text, MagickColors.Black, MagickColors.Red, "Arial", 20);

                        frame.GifDisposeMethod = GifDisposeMethod.Background;
                        frame.Transparent(MagickColors.Black);                      

                        frame.AnimationDelay = 100;

                        magickImageList.Add(frame);
                    }
                    catch(Exception ex)
                    {
                        if (frame != null)
                        {
                            frame.Dispose();
                            frame = null;
                        }
                    }
                }
            }

            return magickImageList;
        }

Below is the API code which I am using so that I can run the API in browser and can render the image directly on browser

Code: Select all

        [Route("api/preview")]
        [HttpGet]
        [System.Web.Mvc.OutputCache(NoStore = true, Duration = 0, VaryByParam = "None")]
        public HttpResponseMessage GeneratePreview()
        {
            HttpResponseMessage response = null;

            byte[] resultBytes = GenerateCountdown(DateTime.Now, 60);

            if (resultBytes != null)
            {
                response = new HttpResponseMessage(HttpStatusCode.OK);
                response.Content = new ByteArrayContent(resultBytes);
                response.Content.Headers.ContentType = new MediaTypeHeaderValue("image/gif");
            }
            else
            {
                response = Request.CreateResponse(HttpStatusCode.BadRequest);
            }

            return response;
        }

[dlemstra]

What are you doing inside the WriteText method? And why don't you make your frame black instead of transparent?

[nis4nilesh]

Hello, Thanks for the response.
I am using below code in the WriteText method. It was an extension method so I missed including in the original post

Code: Select all

public static void WriteText(this MagickImage image, string text, MagickColor backgroundColor, MagickColor fontColor, string fontFamily, double fontSize)
        {
            image.BackgroundColor = backgroundColor;
            image.Settings.FillColor = fontColor;
            image.Settings.Font = fontFamily.Replace(" ", "-");
            image.Settings.FontPointsize = fontSize * 96.0 / 72.0;
            image.Read(string.Format(CultureInfo.InvariantCulture, "label:{0}", text.Replace("%", "%%")));
        }

I have also tried creating frame with Black color as per suggestion, however, I am not seeing any different result. Anti-aliasing is still same. I tried below code (including changed code as below)

Code: Select all

frame = new MagickImage(MagickColors.Black, 200, 40);
frame.WriteText(text, MagickColors.Black, MagickColors.Red, "Arial", 20);
frame.GifDisposeMethod = GifDisposeMethod.Background;
frame.Transparent(MagickColors.Black);

Can you please suggest what am I missing here?

Thanks

[dlemstra]

It turns out that you are not missing something you added something that should not be added. Just remove the following statement:

Code: Select all

frame.Transparent(MagickColors.Black); 

You will now get the text on the image with a background color. I have bad news you want your background to be transparent. Gif only supports fully transparent pixels so the text will not look that great on a transparent background.