Category Archives: Javascript

Using tables to replace images in HTML Newsletters, a tool using FileReader + Canvas javascript

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.

Youtube hit count spinner

As seen in countless TV adverts and movies. If you drag the button to your bookmark menu and click it whilst on a youtube video it will make your hitcount start growing really fast. If it needs to be said this is just an effect and doesn’t actually increase the amount of views your video has according to youtube its just a effect in your browser.

To to see it in action visit drag the button to your bookmarks to use it on

I wrote it mainly to practice some non-jquery javascript and I wanted to do a bookmarklet. So if you have any suggestions to improve the javascript let me know here or you can also fork me on github.