OK, Yes I know it sounds mental, but consider the latest email that came from apple selling tickets for their WWDC tickets today. When it arrived in my inbox today it looked like this:
When you enable images it looks like this:
It’s nicer but wouldn’t it be nicer if there was a better in-between stage before the ‘display images’ button was pushed. What if there was a way to display the nice image as a html table so it could be sent in an email and look half decent before ‘display images’ is pressed.
I decided to knock up a quick tool that does exactly that. I wanted a completely client side solution so I used the FileReader api. This does mean that browser compatibility is not wide and the tool doesn’t do any degradation, if your browser doesn’t support it the error console is probably the best place to tell it hasn’t worked. You can also use the sample image if you run in to problems using your own. When I feed the apple artwork through the tool and replace the image the email now looks like this:
Also: view it in your browser. Once the image data has been accessed using the FileReader api it loads the data into a canvas element it samples the image at user defined intervals to get the rgb values. Each of the samples it takes is a <td> in the table with a individual colour. Use firebug / browser developer tools to view the tables output.
