Fortune Cookie Image Generator

I’ve always enjoyed playing with meme image creation tools such as saysit.com and many others. When I couldn’t find a creation tool to make fake fortune cookie images I decided to build my own. It would also give me a chance to play with some HTML5 technology I’ve been looking at, specifically SVG images.

The generator quite simply builds an image of a fortune cookie with a custom slogan provided by the user. You’ll find it at http://jim.ignitiondomain.com/fc

How I built it

Once I found a suitable fortune cookie image on Flikr (an excellent image from Flikr user cpstorm), and checked it had the right license (Creative Commons for modification) I merely had to remove the existing slogan on the image. Easy right? As it happens, Photoshop’s Content Aware Removal tool does a brilliant job at this kind of thing, and the operation barely took ten minutes.

I then used Inkscape to make an SVG file that featured the image, plus a template for the replacement text. This involved picking a suitable font, laying down a path for the text based on the existing slogan, and carefully selecting a filter to get the ‘blotter paper’ look. I was pretty pleased with the results, if feel the results are almost photorealistic.

I simplified the SVG file as much as possible (Inkscape is excellent but it does include some redundant data that can be removed by hand).

Next step was to host the SVG image in a generator html page, where the user could supply text that would be patched into the SVG. This worked great; on Chrome, Firefox and Opera. Safari doesn’t support filters so the blotter-paper text effect didn’t work. IE doesn’t support SVG at all right now (although it is coming in the next major release)

So to support these browsers, and to allow the image to be saved as a .jpg file, I really needed the ability to generate the JPGs on the server side.

It turns out this is very hard. I looked at ImageMagick which my web host supports. Unfortunately none of ImageMagick’s supported SVG engines has text paths, so the effect would be impossible.

In the end I discovered Batik which is a superb Java-based SVG engine with transcoding abilities. The only problem is my current web host doesn’t support Java, and another option Google App Engine wouldn’t work because Batik uses multiple threads and App Engine does not allow that.

I looked at options and found an inexpensive Java host just for this application, and purchased a three year package. This allows me to support all browsers, but use client rendering on Chrome, Firefox and Opera for a better experience. The Java servlet uses Batik to generate JPGs from the same SVG used to build the images in browsers, with the custom slogan passed on URL parameters.

I also wanted to provide a great image hotlinking service that was as easy to use as possible. It wouldn’t be ideal to try to allow hotlinking on the generator site for a number of reasons, but since there are tons of image hosting sites out there for this kind of thing, the best thing would be to integrate with one of those. I’d seen something called ‘anonymous sideloading’ from an image site called imgur.com, and this proved to be ideal. With one click I can load the images directly onto imgur via users’s browsers. The only tough bit was the restrictions that imager was putting on characters in the source image URL; specifically imgur’s side loader didn’t like the & symbol or spaces. I needed to rejig the generator to take all the parameters as a single Base64 encoded JSON object. This made the URLs imgur friendly and the image hosting setup works a charm.

Hope you enjoy the generator at http://jim.ignitiondomain.com/fc!

  1. Roger Williams’s avatar

    Please Jim, can you take a look at your Android App, “BBC News”.

    I live by this and it’s the best, but…
    on Saturday (approx 0900) it stopped updating, no errors, just stopped. As if the feed stream has ceased.

    It’s not just me; everyone else is having the same problems – see latest Android MarketPlace comments.

    Sorry for posting, not sure how else to contact you.

    Thanks,
    Roger

  2. apple’s avatar

    i’d like to be able to center the fortune cookie message!!!!!!

  3. Will’s avatar

    It says the account was suspended. Please reupload this.

  4. cheaty’s avatar

    Somehow http://jim.ignitiondomain.com/fc went offline recently… why???

  5. jimblackler’s avatar

    Because I didn’t pay the bill for hosting! But I paid it today and it’s back.

  6. Jesse Smith’s avatar

    It cuts off the last one or two characters if you use the max number of characters. You then have to take the screenshot yourself to get it.

    Also, it would be great if it had a option, or being able to add spaces before the words to center it.

  7. Asinine’s avatar

    It’s gone again. This is pure genius, and I only discovered it now, and it doesn’t work.

    But cheers for posting though!

  8. JP Villanueva’s avatar

    Hi, the generator is offline again. There are other fortune cookie image generators but none are as beautiful as this one. I like how the text curves to the curve of the paper, and I like the food-porn image of the fortune cooking, without any cheesy hongkongfooey elements in other people’s generators. The image is well composed. Will you please let me know if the site comes on again? btw, I would spend $1.99 on an iOS app to be able to use it. I’m a high school teacher who happens to be asian american, so I use images like these to say things like “do your homework” and “practice your spanish.”

Reply

Your email address will not be published. Required fields are marked *