3

I would like to display an image that changes its content every 2 seconds (or something like that). Unfortunetly I can't use JavaScript, Flash or Silverlight because I want to use the animation in outgoing html emails with maximum compatibility between various email clients.

So, I tried to generate the image with an .ashx handler. But I am not able to refresh the image (or re-execute the ashx handler). I tried a loop, but that didn't work.

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "image/png";

        string strDisplay = DateTime.Now.ToString();

        Bitmap bmpOut = new Bitmap(400, 50);
        Graphics g = Graphics.FromImage(bmpOut);
        g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
        g.FillRectangle(Brushes.Black, 0, 0, 400, 50);
        g.DrawString(strDisplay, new Font("Verdana", 18), new SolidBrush(Color.White), 0, 0);

        MemoryStream ms = new MemoryStream();
        bmpOut.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
        byte[] bmpBytes = ms.GetBuffer();
        bmpOut.Dispose();
        ms.Close();

        context.Response.BinaryWrite(bmpBytes);
        context.Response.End();

    }

How do I have to do this, or is there an other solution?

Edit: The image content is not predefined. It contains for example a list of tweets.

Edit: Currently we are trying MJPEG. Does anyone know more about this and email clients?

Help much appreciated,

Vincent

Vinzcent
  • 1,438
  • 6
  • 33
  • 59

3 Answers3

7

After reading some of the comments, it appears the real question is how to display an animated sequence of images in an email.

You are almost never allowed to run JavaScript inside email clients, and even if you could the support could vary dramatically between clients and web mail clients might muck things up. So this option has been eliminated.

Likewise Flash/Silverlight are not likely to have good support by email clients and require that a browser plugin be installed which may not be possible from some desktop email client software. So this option has been eliminated.

So we are left with animated GIF images. This format has been supported for a very long time in "internet time". However, you have two things to keep in mind:

  1. Most email clients now block images (actually all external resources) until the user explicitly clicks "show images and links" or something like that in their email client. This means its still not guaranteed they will see your image. You might be able to embed the animated gif in the email when its sent, but then you give up the ability to have recent info in the animation. (ie I might not read your email for a week, if the image was embedded it is now a week old social news, if its an external URL I might not click "show images")
  2. Animated GIFs use a 256 color palette so you can't do photographic animations with photographic quality. This question though appears to be about displaying mostly textual content writing out recent social interactions (tweets/posts), so we should be ok.

Assuming these conditions are suitable for your application, we need to figure out how to produce an animated GIF in your HttpHandler code you've posted in the question. This is not a new idea, we don't need to re-invent the wheel. There are other posts on stackoverflow here:

The most upvoted answer in the first stackoverflow post looks quite reasonable to me: HOWTO: create an animated GIF using .Net (C#)

This technique is not dependent on any external libraries and has some comments explaining the various header fields. In your case you will be interested in the buf3 byte array in this code which is the header for each frame. This is where you can set the delay for each image being displayed. You will probably benefit from a quick google search for the animated GIF specifications, which would turn up:

The specifications will allow you to lookup exactly what each header field does. If you don't have the desire to learn about the headers in a GIF, then maybe just go back to someone else's implementation like: NGif encoder on CodeProject. Of course you'll always have more control over the process if you have a deeper understanding of how it works. Even if you use someone else's implementation, it is handy to understand what its doing behind the scenes.

Community
  • 1
  • 1
BenSwayne
  • 16,810
  • 3
  • 58
  • 75
  • Thank you for your very clear answer. But unfortunatly we should have to create the give when the user opens a mail and then always show "old" tweets in the gif. But we want to show live tweets. We are trying MJPEG now. Do you think this would work? – Vinzcent Nov 21 '11 at 09:28
  • @Vinzcent I don't think you fully understood. In your email body you can either link to an external GIF at your own URL on the web or you can embed the GIF inside the email. Only the embedded one would be old, the external URL would be live. But some email software blocks external links so your user must click to see the image. In BOTH CASES you are using a GIF image, its just the technique you use to include it in your email that will change the results. A MJPEG will not be any different, but perhaps a little worse due to the number of email clients that will simply not support it. – BenSwayne Nov 21 '11 at 15:21
1

You can use CSS 3 animations for this, check out http://www.1stwebdesigner.com/css/50-awesome-css3-animations/ for some examples.

I didn't use CSS 3 myself, but I saw my collegues do cool stuff with it.

Ivo
  • 3,406
  • 4
  • 33
  • 56
  • My real image is a bit more complex than just a clock that I use in this example :) – Vinzcent Nov 18 '11 at 09:37
  • If you are going to rely on CSS3 working why not just use JavaScript? Anyone with a modern, up to date browser will either have JavaScript working or have intentionally disabled because they know what it does and that they don't want it and could turn it back on should they see a need when accessing your site. – BenSwayne Nov 20 '11 at 16:33
  • Now that I read some clarification below from the original poster, it appears this is for email in which case both CSS3 and JavaScript are out of the question. Think about how many email clients out there are 3-5 years old (think smart phones that are 3 years old) plus people running webmail in older browsers (maybe a gmail user in IE6). – BenSwayne Nov 20 '11 at 17:23
0

Can you not just create an animated gif? I don't know where your images are coming from, but to me this seems the most simple solution.

Failing that, you could create a service which runs every 2 seconds on your server but I'm not sure how you would get that to plug into your site.

Simon
  • 2,810
  • 2
  • 18
  • 23
  • No, the image content is not predefined. It contains for example a list of tweets :). – Vinzcent Nov 18 '11 at 09:59
  • Ahh ok. Can I ask, why can't you use javascript? – Simon Nov 18 '11 at 10:23
  • Fair dooze. Email clients won't be able to access your server to run the code though, or have I got the wrong end of the stick? – Simon Nov 19 '11 at 17:32
  • Creating a service on your server may allow you to re-write an image file (on the server) every few seconds, but it will not cause the client to refresh their copy. – BenSwayne Nov 20 '11 at 16:37