{"id":241,"date":"2015-01-15T15:39:22","date_gmt":"2015-01-15T14:39:22","guid":{"rendered":"http:\/\/lalloue.fr\/blog\/?p=241"},"modified":"2015-01-15T15:44:07","modified_gmt":"2015-01-15T14:44:07","slug":"recuperer-les-informations-exif-dune-image-en-base64-en-javascript","status":"publish","type":"post","link":"http:\/\/lalloue.fr\/blog\/recuperer-les-informations-exif-dune-image-en-base64-en-javascript\/","title":{"rendered":"R\u00e9cup\u00e9rer les informations EXIF d&#8217;une image en base64 en javascript"},"content":{"rendered":"<p><a href=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2015\/01\/JS.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-244\" src=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2015\/01\/JS.png\" alt=\"JS\" width=\"99\" height=\"130\" \/><\/a><\/p>\n<p>Vous avez un fichier en base 64 et vous voudriez r\u00e9cup\u00e9rer ses informations EXIF?<\/p>\n<p>Voici une technique pour pouvoir le faire depuis une application javascript :<\/p>\n<p><!--more--><\/p>\n<h3>Base 64 :<\/h3>\n<p>Tout d&#8217;abord, qu&#8217;est-ce que c&#8217;est le base 64 ?<\/p>\n<p>En informatique, base64 est un codage de l&#8217;information utilisant 64 caract\u00e8res, choisis pour \u00eatre disponible sur la majorit\u00e9 des syst\u00e8mes. (sources : <a href=\"http:\/\/fr.wikipedia.org\/wiki\/Base64\">wikipedia<\/a>).<\/p>\n<p>Ce qui permet, entre autre, d&#8217;encoder une image sous forme de string, ce qui est plus simple \u00e0 manipuler quand vous devez par exemple envoyer l&#8217;image vers un serveur externe.<\/p>\n<h3>Exif.js :<\/h3>\n<p>Ces informations EXIF ne peuvent pas \u00eatre r\u00e9cup\u00e9r\u00e9es directement depuis la string en base 64 avec une m\u00e9thode de type <em>maPhotoEnBase64.getOrientationFromEXIF() .<\/em><\/p>\n<p>Il y a donc 2 m\u00e9thodes :<\/p>\n<ul>\n<li>Soit parser la string en base64 manuellement pour r\u00e9cup\u00e9rer les informations (telle information se situe au 18\u00e8me bytes, etc&#8230;)<\/li>\n<li>Soit utiliser une librairie qui fait d\u00e9j\u00e0 tout \u00e7a.<\/li>\n<\/ul>\n<p>Personnellement, je suis assez feignant donc je vais prendre la deuxi\u00e8me solution : je vais utiliser la librairie <strong><span style=\"color: #2db3e7;\">&#8220;Exif.js&#8221;<\/span><\/strong><\/p>\n<p>Vous pouvez trouver cette librairie ici :\u00a0<a href=\"https:\/\/github.com\/jseidelin\/exif-js\">https:\/\/github.com\/jseidelin\/exif-js<\/a>.<\/p>\n<p>Elle met \u00e0 disposition le fameux fichier &#8220;exif.js&#8221; qui vous permettra de r\u00e9cup\u00e9rer les informations EXIF, mais \u00e9galement des exemples d&#8217;utilisation (r\u00e9pertoire &#8220;example&#8221;).<\/p>\n<h3>Installation :<\/h3>\n<p>Il vous suffit e r\u00e9cup\u00e9rer le fichier &#8220;exif.js&#8221; et de l&#8217;ajouter \u00e0\u00a0votre projet.<br \/>\nPuis ensuite il sera n\u00e9cessaire de l&#8217;inclure dans votre page html tel que ci-dessous :<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;!doctype html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;script type=&quot;text\/javascript&quot; src=&quot;exif.js&quot;&gt;&lt;\/script&gt;\r\n\r\n&lt;\/head&gt;\r\n...\r\n<\/pre>\n<p>Si vous utilisez <em>bower<\/em>, une petite ligne de commande et le tour sera jou\u00e9 :<\/p>\n<pre lang=\"bash\">$ bower install exif-js --save\r\n<\/pre>\n<h3>Utilisation :<\/h3>\n<p>Prenons l&#8217;exemple d&#8217;un upload de fichier, le fichier est charg\u00e9 depuis une s\u00e9lection sur son ordinateur, puis on r\u00e9cup\u00e8re ce fichier en base 64 (reader.readAsDataURL) :<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar image = new Image();\r\n\/\/create file input without appending to DOM\r\nvar fileInput = document.createElement('input');\r\nfileInput.setAttribute('type', 'file');\r\n\r\nfileInput.onchange = function() {\r\n\tvar file = fileInput.files[0];\r\n\tvar reader = new FileReader();\r\n\treader.readAsDataURL(file);\r\n\treader.onloadend = function() {\r\n                image.src = reader.result;\r\n\t\tEXIF.getData(image, function() {\r\n\t\t\tvar orientation = EXIF.getTag(this, 'Orientation');\r\n\t\t});\r\n\t};\r\n};\r\n\r\nfileInput.click();\r\n<\/pre>\n<p>Il est \u00e9videmment possible de r\u00e9cup\u00e9rer l&#8217;ensemble des tags du EXIF list\u00e9s ici : <a href=\"http:\/\/fr.wikipedia.org\/wiki\/Exchangeable_image_file_format#Exemple\">http:\/\/fr.wikipedia.org\/wiki\/Exchangeable_image_file_format#Exemple<\/a><\/p>\n<h3>Exceptions :<\/h3>\n<p>Tout n&#8217;est pas rose, il existe \u00e9videmment quelques <span style=\"color: #ff6600;\">exceptions<\/span> \u00e0 la r\u00e9cup\u00e9ration de donn\u00e9es EXIF :<\/p>\n<ul>\n<li>EXIF est support\u00e9 par le format <strong>JPG<\/strong> mais pas par le type de fichier <span style=\"color: #2db3e7;\">PNG<\/span><\/li>\n<li>Si vous essayez de r\u00e9cup\u00e9rer les informations EXIF depuis une photo de l&#8217;album\u00a0dans <span style=\"color: #2db3e7;\">une application mobile depuis le module Camera de Cordova<\/span> par exemple, vous n&#8217;aurez pas acc\u00e8s aux informations EXIF. Celles-ci sont en effet tronqu\u00e9es. Mais cela marche avec une photo prise.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Vous avez un fichier en base 64 et vous voudriez r\u00e9cup\u00e9rer ses informations EXIF? Voici une technique pour pouvoir le faire depuis une application javascript :<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[9],"tags":[39],"_links":{"self":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/241"}],"collection":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/comments?post=241"}],"version-history":[{"count":4,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/241\/revisions"}],"predecessor-version":[{"id":246,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/241\/revisions\/246"}],"wp:attachment":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/media?parent=241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/categories?post=241"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/tags?post=241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}