How to convert an image into an HTML Table

Attention: Les informations de ce billet sont susceptibles d'être obsolètes car vieux de plus 2 ans.

Warning: The information you are reading may be obsolete, this post was published more than 2 years ago.

Why on earth would someone do that ? Well according to this website it’s for email convenience because not all email clients are able to display correctly images or just happen to block them.

Okay we all hate tables in HTML and increasing abnormally your email length to be sur that your icon is visible is purely insane. Nevertheless it gave me an opportunity to see if I could recreate the feature using only HTML, Javascript and CSS. The idea behind this was for me to play around with canvas, and the new FileReader API. So after a lot a tries and errors, I’ve put out a script that just do what this website was set out to offer you throught an identification process. The only thing I can say is HTML and the technologies that come along with it are becoming increasingly powerfull.I think I’ll upload the whole code on GitHub you’ll never know if someone wants to improve it 🙂

Just jump to my demo page

Afin de combattre les clients e-mail récalcitrants ce site web permet à tout un chacun via une inscription de convertir une image en une balise table équivalente. Vous me direz qu’augmenter la taille de son mail pour arriver à une telle finalité est … bizarre mais cela m’a au moins pousser à rechercher si je pouvais obtenir le même résultat via mon navigateur directement. Pourquoi ? Pour que je puisse jouer avec la balises canvas et l’API qui va avec ainsi qu’avec le nouvel API FileReader qui permet de manipuler les fichiers télécharger via votre navigateur. Le résultat est simplement génial et cela ne m’a pas pris beaucoup de temps 🙂 . Je vais m’arranger pour mettre le code sur GitHub comme ça on pourra toujours l’améliorer dans le futur.. qui sait?

En attendant voici la page démo

One thought on “How to convert an image into an HTML Table

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.