• 個人情報をサーバーに保存したくない人
• 少しでも画像データの削減をしたい人

FinderでExif情報がある画像を見ると、こんな感じ。

GPSはFinderから消せるけど、他の情報は消せない。。。

画像のように、Exif情報は、画像の向きや撮影したカメラ情報、撮影場所のデータが格納されている。

どの画像ファイルにもあるものではなく、JPEG（JFIF/.jpgファイル）あるいはTIFF（.tifファイル）などのファイル形式と共に用いられることが多い。

jsでExif情報の操作をする記事は少ないので苦労しました。みんなどうしているんだろう。。。

pythonなどでは、PILを使って画像自体を新規作成したら消せるみたいなこともある様子。

Exif情報には、画像の向きなどの情報も含んでいるので、むやみに消すのは良くない。

今回は、こちらのライブラリを使わせていただきました。

中身を見るとわかるのですが、バイナリデータをそのままいじっています。

JPEGファイルの構造などは、こちらを参照ください。

まずは、EXIF.jsを丸々コピーして、assetsフォルダなどの適当なところをに保存します。

次に、先程保存したjsファイルをhtml側から呼び出せるように読み込ませます。

<script src="assets/EXIF.js"></script>

あとは、下記のコードをhtml内で動かせばjpegファイルがダウンロードされます。

// inputフォームなどから画像データを取得。このあたりはよしなにしてください。
var buffer = event.target.result;

// uint8arrayに変換する。
var uint8Array = new Uint8Array(buffer);

// EXIF object定義。
ExifMaster = new TExifMaster(uint8Array);

// EXIF削除し、画像をダウンロード。
ExifMaster.SaveToFile("test.jpeg", false)

僕は、Exif情報を消したあと、s3にアップロードしたかったので、

先程のEXIF.jsに関数を付け足しました。

// -----------------------------------------------------------
// all : true 全てのExifを削除 false 画像方向のみを残す
// -----------------------------------------------------------
SaveToUint8Array: function (all) {
	// uint8arrayオブジェクトが返却される。
	return this.SaveToStream(all, true);
}

呼び出し側は、下記のようにしてみました。

var buffer = event.target.result;

var uint8Array = new Uint8Array(buffer);

// EXIF object定義
ExifMaster = new TExifMaster(uint8Array);

// EXIF削除。uint8arrayオブジェクトで取得
const convertedUint8Array = ExifMaster.SaveToUint8Array(false)

// Fileオブジェクトに戻すなどしても良い。
upload_file = new File([convertedUint8Array.buffer], upload_file.name, {type: "image/jpeg"})

Exif情報の確認は、TExifMasterを初期化後、Analystプロパティに保存されます。

console.logなどで、ご自身が欲しい情報を見つけてみてください。

ExifMaster = new TExifMaster(new Uint8Array(reader.result));

// プロパティ確認用
onsole.log(ExifMaster.Analyst);