JavaScriptでjpeg画像のexif情報を取得する(exif-js使用)

サーバーに画像ファイルをアップロードせず、ブラウザでexif情報を取得できないか調べてみました。

exif-js



exif-jsというそのものずばりのライブラリがありました。
https://github.com/exif-js/exif-js


ファイルを選択したら、そのファイルのexifに記載されている日付情報(DateTimeOriginal)や
回転情報(Orientation)を取得してみます。


EXIF.getDataでexif情報を解析。
解析後、EXIF.getTag(this, "[exifのタグ名]")で、値を取得できます。

jsファイルは、cdnで公開されていたので、それを利用しました。


  1. <!doctype html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Sample</title>
  6.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  7.     <script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.2.1/exif.min.js"></script>
  8. <script type='text/javascript'>
  9. $(function() {
  10.     $('#test').on('click', function() {
  11.         var file_input = $('#file-input');
  12.         var file = file_input[0].files[0];
  13.         
  14.         // EXIF.getDataでexif情報を解析
  15.         EXIF.getData(file, function() {
  16.             var result = '';
  17.             // EXIF.getTag(this, "[exifのタグ名]")で、値を取得
  18.             result += 'DateTimeOriginal:' + EXIF.getTag(this, "DateTimeOriginal");
  19.             result += '<br>';
  20.             result += 'Orientation:' + EXIF.getTag(this, "Orientation");
  21.             $('#result').html(result);
  22.         });
  23.     });
  24. });
  25. </script>
  26. </head>
  27. <body>    
  28.     <h3>exifテスト</h3>
  29.     <input id="file-input" type="file" />
  30.     <div>
  31.         <input type="button" id="test" value="実行" />
  32.     </div>
  33.     <div id="result"></div>
  34. </body>
  35. </html>




初期表示

764_01.png

jpegファイルを選んで実行をクリックすると、exif情報を表示します。

764_02.png

ちゃんとexif情報が取得できました。






FileReaderとの組み合わせ



FileReaderでローカルファイルを読み込み済の場合、そのデータを利用してexifの解析が行えます。


  1. <!doctype html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Sample</title>
  6.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  7.     <script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.2.1/exif.min.js"></script>
  8. <script type='text/javascript'>
  9. $(function() {
  10.     $('#test').on('click', function() {
  11.         var file_input = $('#file-input');
  12.         var file = file_input[0].files[0];
  13.         // FileReaderで選択したファイルの読み込み
  14.         var fileReader = new FileReader();
  15.         fileReader.onload = function(e) {
  16.             var bytes = e.target.result;
  17.             // EXIF.readFromBinaryFileでexifの解析
  18.             var exif = EXIF.readFromBinaryFile(bytes);
  19.             // 結果を表示
  20.             var result = '';
  21.             // EXIF.getTag(this, "[exifのタグ名]")で、値を取得
  22.             result += 'DateTimeOriginal:' + exif['DateTimeOriginal'];
  23.             result += '<br>';
  24.             result += 'Orientation:' + exif['Orientation'];
  25.             $('#result').html(result);
  26.         };
  27.         fileReader.readAsArrayBuffer(file);
  28.         
  29.     });
  30. });
  31. </script>
  32. </head>
  33. <body>    
  34.     <h3>exifテスト</h3>
  35.     <input id="file-input" type="file" />
  36.     <div>
  37.         <input type="button" id="test" value="実行" />
  38.     </div>
  39.     <div id="result"></div>
  40. </body>
  41. </html>




EXIF.readFromBinaryFileに読み込んだbyte配列を渡すと解析結果が返却されます。
処理の内容によっては、こちらのほうが便利かもしれません。

測定していないですが、こちらのほうが処理速度が速い気がします。


サンプルはこちらにおいておきます。
http://symfo.web.fc2.com/js-sample/jq/sample5.html


関連記事

コメント

非公開コメント

プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
Symfoware まとめ

PR




検索フォーム

月別アーカイブ