This project has moved and is read-only. For the latest updates, please go here.

Custom text on gif

Feb 8 at 11:03 PM
I have a list of individual images (26 in total - one image per alphabet word) and I would like to create an animated .gif depending on what the user types in an input, this gif should display the images one by one until the word is completed.

Example:
The user types: "Hello"
So I need my gif to have the following frames:
Frame 1: H
Frame 2: He
Frame 3: Hel
Frame 4: Hell
Frame 5: Hello

I use this code https://magick.codeplex.com/wikipage?title=Combining%20images&referringTitle=Documentation to create my animated gif but it overlays all the images and create the gif instead creating a single line adding the letters one by one.

Following my code
 using (MagickImageCollection collection = new MagickImageCollection())
            {
                var wordCounter = 0;
                foreach (var word in Message)
                {
                    if (File.Exists(OutputPath + string.Format("Words/{0}.png", word)))
                    {
                        collection.Add(string.Format("~/Words/{0}.png", word));
                        collection[wordCounter].AnimationDelay = 100;
                        collection[wordCounter].AnimationIterations = 1;
                    }                    
                    wordCounter++;
                }

                // Optionally reduce colors
                QuantizeSettings settings = new QuantizeSettings();
                settings.Colors = 256;
                
                collection.Quantize(settings);

                
                // Save gif                
                collection.Write(string.Format("{0}Words/{1}.gif", OutputPath, Message.ToLower()));
            }
Thanks
Feb 10 at 2:18 PM
Without seeing your input image I am guessing that you have your words on a colored background. I am thinking that because of your other post here: https://magick.codeplex.com/discussions/661233. Below is an example of how you could create the image you want:
string word = "Hello";

using (MagickImage background = new MagickImage("background.png"))
{
  using (MagickImageCollection collection = new MagickImageCollection())
  {
    for (int i = 1; i < word.Length + 1; i++)
    {
      MagickImage frame = background.Clone();

      frame.AnimationIterations = 1;
      frame.AnimationDelay = 100;

      new Drawables()
        .FillColor(MagickColors.Fuchsia)
        .Font("Times New Roman")
        .FontPointSize(90)
        .Text(50, 200, word.Substring(0, i))
        .Draw(frame);

      collection.Add(frame);
    }

    // This will reduce the size of your file.
    collection.Optimize();

    collection.Write("test.gif");
  }
}