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.
great and all, but why no 1px option. I have some very simple pixel designs I’m trying to tableize, but cant find a good converter
Hey, there is no 1 px option as depending on the size of the image it might melt your CPU :p. Its already fairly intensive only when it skips over 5px per draw.
Feel free to hack it to add a 1px option it can all be ran client side, it should be a case of adding the option to the dropdown.
Hi Matty,
This is great – looks really nice and you’re right – it offers a great solution!
One (perhaps silly) questions though. How would you code it so that the image appears preferentially unless “show images” is turned off?
I may be being silly but struggling a little with it.
Ie so that ideally the original jpg/png etc is shown but if not, it defaults to the html table which I guess is almost acting as an Alt for the image.
Thanks
Hey, thanks for the Q. Both the table and the Image would be in the markup, so you couldn’t load one or the other. You could however position the image on top of the table with absolute positioning so that when the “Display images” button is pressed the image appears on top of the table.
Hope that helps.
PS, about an hour ago I was writing a list of blog posts to revive this blog from the dead and one idea was to do a walk through of the code that generates the table. Maybe I will also do a fuller example with an image replacing the table if images are enabled,
Hi Matty,
Thanks for clarifying. Thats what I thought to be honest. A fuller example would be great.
Thanks