Meme generator generator

October 24, 2013 5:46 AM

I have a little web app I cobbled together that plops a few graphics on top of and next to each other and displays the result on the page. Think "Y u no...", etc. Works a treat. But, although it displays nicely, it is still just the constituent parts lumped together using HTML. It would be more effective if it were distilled into a single distinct image file that was savable in some way. Some way more friendly than "take a screenshot." How do I make that happen?

The app as it stands is classic ASP, as that is where my skills (such as they are) are concentrated. If I could get something else working I'd be open to it, but familiarity breeds success, to some degree.

posted by dirtdirt to Computers & Internet (4 answers total)

To do that you either need a tool to render a HTML to an image or to work strictly in image space. Many years ago, I wrote a motivational poster generator app, which you can see here. I wrote it strictly to show off our imaging toolkit. For example, it picks a color for the text from the content of the image in order to best accent it - you can likely ignore that. Instead, look at how I'm rendering text and so on.

I think you can do most of this with the free version of our toolkit, but you can also do this with server side code in C# or VB that builds a .NET Bitmap object then constructs a Graphics object that renders to the Bitmap, then draw what you want using Graphics methods.
posted by plinth at 5:55 AM on October 24, 2013

I would start with the ImageMagick library.
I have no idea if/how it works with ASP but you can use that as a start for your search...
posted by jozxyqk at 5:59 AM on October 24, 2013

If you don't mind breaking support for <IE9 you can use something like html2canvas to do it in the client.
posted by Memo at 6:44 AM on October 24, 2013

Given you've already done the HTML work, what you want is to run a headless browser to render the web page on your server. I know nothing about the ASP world, sorry, but if I were doing this I'd use PhantomJS or something similar. The second option is as Memo says; render the image in the user's browser, then grab the pixels and save them away. That's a pretty roundabout way of doing things though. The third way would be to rewrite your image compositing code to use ImageMagick or the like.

BTW, once you've got the meme down to a single image you can easily host it on something like S3 as a single static file. That gives you massive scalability and is basically how imgur survives Reddit.
posted by Nelson at 6:59 AM on October 24, 2013