{"id":1621,"date":"2011-07-22T14:31:49","date_gmt":"2011-07-22T12:31:49","guid":{"rendered":"http:\/\/www.nyamsprod.com\/blog\/?p=1621"},"modified":"2011-07-23T21:48:47","modified_gmt":"2011-07-23T19:48:47","slug":"how-to-convert-an-image-into-an-html-table","status":"publish","type":"post","link":"https:\/\/nyamsprod.com\/blog\/how-to-convert-an-image-into-an-html-table\/","title":{"rendered":"How to convert an image into an HTML Table"},"content":{"rendered":"
\n

Attention:<\/strong> Les informations de ce billet sont susceptibles d'être obsolètes car vieux de plus 2 ans.<\/p>\n

Warning: <\/strong> The information you are reading may be obsolete, this post was published more than 2 years ago.<\/p>\n<\/div>

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

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 \ud83d\ude42<\/p>\n

Just jump to my demo page<\/a><\/p>\n

Afin de combattre les clients e-mail r\u00e9calcitrants ce site web permet \u00e0 tout un chacun<\/a> via une inscription de convertir une image en une balise table \u00e9quivalente. Vous me direz qu’augmenter la taille de son mail pour arriver \u00e0 une telle finalit\u00e9 est … bizarre mais cela m’a au moins pousser \u00e0 rechercher si je pouvais obtenir le m\u00eame r\u00e9sultat 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\u00e9l\u00e9charger via votre navigateur. Le r\u00e9sultat est simplement g\u00e9nial et cela ne m’a pas pris beaucoup de temps \ud83d\ude42 . Je vais m’arranger pour mettre le code sur GitHub comme \u00e7a on pourra toujours l’am\u00e9liorer dans le futur.. qui sait?<\/p>\n

En attendant voici la page d\u00e9mo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[93,605,604,292,606],"class_list":["post-1621","post","type-post","status-publish","format-standard","hentry","category-web","tag-canvas","tag-converting-images","tag-filereader-api","tag-javascript","tag-tables"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/1621","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/comments?post=1621"}],"version-history":[{"count":5,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/1621\/revisions"}],"predecessor-version":[{"id":1629,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/1621\/revisions\/1629"}],"wp:attachment":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/media?parent=1621"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/categories?post=1621"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/tags?post=1621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}