写真のEXIF情報をjavasriptで読み込む EXIF.js サンプルコード

EXIF を exif.jsで読み込む

EXIF を javascript のライブラリで読み込む方法を紹介します。

僕はコピペコーダーなので、僕と同じく公式リファレンスやGitHubをわざわざ読みたくないめんどくさがりな人も役に立てて欲しいです。

最小限でシンプルなコードにしています。

これからつくるもの

こちらになります

EXIF

ソースコード

HTML

<html>
	<head>
		<meta charset="utf-8">
		<title>EXIF</title>
		<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
		<script src="script.js"></script>
	</head>
	<body>
		<h1>EXIF</h1>
		<img src="sample.jpg" id="img">
		<div class="exifinfo">EXIFの情報</div>
	</body>
</html>

<html>

<head>

</head>

<body>

<div class="exifinfo">EXIFの情報</div>

</body>

</html>

5行目: まずjQuery を読み込みます (CDN)
6行目: CDN exif-jsを読み込みます
11行目: 該当の写真 id = “img” をもとにjsで判定します
12行目: class=”exifinfo” をターゲットにしてjsで情報をアペンドするため

なお、exif.js はいかがでしたでしょうか記事によっては誤ったcdnが指定されています。

上のコードは僕が試したので動きます。

参考サイト：

画像のExif情報を読み込むJavaScriptライブラリExif.jsの使い方 – 3テラバイト

jQuery, exif.jsともにCDNにしてますが、CDNがあるならそっちの方が楽なので良いと思います。

JS

$(window).on('load', function (){
    getExif();
});
function getExif() {
    var img = document.getElementById("img");
    EXIF.getData(img, function() {
        var datetime = EXIF.getTag(this, "DateTimeOriginal");//dateTimeではだめ。dateTimeOriginal
        var ss = EXIF.getTag(this, "ExposureTime");//シャッタースピード
        var fnumber = EXIF.getTag(this, "FNumber");//絞り
        var iso = EXIF.getTag(this, "ISOSpeedRatings");//ISO
        var model = EXIF.getTag(this, "Model");//カメラモデル

        $(".exifinfo").append("<p>DateTime: "+datetime+"</p>");
        $(".exifinfo").append("<p>SS: 1/"+ss+"</p>");
        $(".exifinfo").append("<p>F: "+fnumber+"</p>");
        $(".exifinfo").append("<p>ISO: "+iso+"</p>");
        $(".exifinfo").append("<p>MODEL: "+model+"</p>");
    });
};

$(window).on('load', function (){

getExif();

});

function getExif() {

var img = document.getElementById("img");

EXIF.getData(img, function() {

var datetime = EXIF.getTag(this, "DateTimeOriginal");//dateTimeではだめ。dateTimeOriginal

var ss = EXIF.getTag(this, "ExposureTime");//シャッタースピード

var fnumber = EXIF.getTag(this, "FNumber");//絞り

var iso = EXIF.getTag(this, "ISOSpeedRatings");//ISO

var model = EXIF.getTag(this, "Model");//カメラモデル

$(".exifinfo").append("<p>DateTime: "+datetime+"</p>");

$(".exifinfo").append("<p>SS: 1/"+ss+"</p>");

$(".exifinfo").append("<p>F: "+fnumber+"</p>");

$(".exifinfo").append("<p>ISO: "+iso+"</p>");

$(".exifinfo").append("<p>MODEL: "+model+"</p>");

});

};

1行目: ウィンドウが読み込まれてから発動します。

単にfunction(){} だと画像が読まれるよりも前に jsが動くので、写真のEXIF情報がとれないです

5行目: #img (id=”img”) をもとに、写真を指定します
6行目 EXIF.getData の第一引数に var img を入れて fanction を発動
7行目以降 getTag (this, “EXIFの項目名”)　でドンドコとっていきます
13行目以降は、HTMLに取得した情報をくっつけていきます。

以上です。超簡単です。

今回は誰でも簡単に見れるように5つのEXIF情報をべた書きしてますが、本当に大量に取得するなら foreachした方が良いと思います。

exif-js/index.html at master · exif-js/exif-js · GitHub

こちらの27行目以降なども参考になります。

なお、サイトによってはAjaxでとったものをBolbで生成云々… とやたら難しく書いてあり、それでも出来るとは思いますが、めんどいだけだと思います。

こちらではやや重い処理と言っていますが、2022年11月に僕が試したかぎり重い処理だとは思いません。

パラメーター参考

撮影日、シャッタスピードなどのパラメーターです。

jpegからExif情報を取得する | jquery.exif.js

こちらから(ExposureTime, DateTimeOriginal 等)を参考にしました。

良く使うのは FNumber 絞り, ISOSpeedRatings ←ISO, GPSLatitudeRef などGPS系だと思います。

使いそうなのを赤にしておきました。

EXIF.getTag(this, “〇〇〇”);　のように使えますね。

Make
Model
Orientation
XResolution
YResolution
ResolutionUnit
Software
DateTime
YCbCrPositioning
ExifIFDPointer
GPSInfoIFDPointer
ExposureTime
FNumber
ISOSpeedRatings
ExifVersion
DateTimeOriginal
DateTimeDigitized
ComponentsConfiguration
ShutterSpeedValue
ExposureBias
MeteringMode
LightSource
Flash
FocalLength
FlashpixVersion
ColorSpace
PixelXDimension
PixelYDimension
InteroperabilityIFDPointer
CustomRendered
ExposureMode
WhiteBalance
DigitalZoomRation
SceneCaptureType
SubjectDistanceRange
GPSVersionID
GPSLatitudeRef
GPSLatitude
GPSLongitudeRef
GPSLongitude
GPSAltitudeRef
GPSAltitude
GPSTimeStamp
GPSStatus
GPSMapDatum
GPSDateStamp

動的に生成する部分に画像があるときのみメリットがある

今回は最も簡単に表示させるコードを紹介しましたが、正直、1枚の写真を出すだけのページにjsで書くメリットは無いです。その場合はPHPを使えば良いと思います。→次項

JQueryで写真を非同期で読み込んで、その瞬間に、おばあちゃんの作る無意味に豪華な夕飯についてくるほうれん草のように、EXIFを表示させたい場合は、今回のexif jsが役に立つことでしょう！

参考: jQueryで画像を非同期で読み込み。 | Almondlab

javascriptで非同期処理で画像データというとAjaxを思い浮かべますが、それはめんどいだけです。jQueryで行けます。jQueryは枯れた技術とか馬鹿にされてるけど、ほぼ万能で笑える。

PHPで読み込む

EXIFを読みこんでwebページに表示する方法はjsだけでなく、もちろんphpでも出来ます。

1枚のページに表示し、その後何もアクションが無い場合は jsで書くメリットは無いので、PHPとかで処理した方が良いんじゃないでしょうか

PHP: exif_read_data – Manual

前回技術記事

Open railway map

https://syachikuai.com/2022/11/24/openrailwaymap-api/ ‎

EXIF を exif.jsで読み込む

これからつくるもの

ソースコード

HTML

JS

パラメーター参考

動的に生成する部分に画像があるときのみメリットがある

PHPで読み込む

前回技術記事

これも読んでみませんか

電車の画像投稿サイトを作った。撮り鉄用【Laravel】

OpenLayers7 OpenStreetMap 最新版7.1.0 地図

【Python】Exif 画像回転情報 読み取り 最も単純なコード

【Python】Exif 画像回転情報読み取り最も単純なコード