以下が、JavaScriptを使って実装した画像のexif情報の有無を判別するアプリです。セキュリティの脆弱性を防ぐため、画像の読み込みにはFileReaderを使用し、exif情報の読み取りには外部ライブラリであるexif-jsを使用しています。
```
<!DOCTYPE html>
<html>
<head>
<title>画像のexif情報判別アプリ</title>
</head>
<body>
<h1>画像のexif情報判別アプリ</h1>
<form>
<label for="file-upload">画像を選択してください：</label>
<input type="file" id="file-upload" accept=".jpg, .jpeg, .png" onchange="checkExif()">
</form>
<p id="result"></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.min.js"></script>
<script>
function checkExif() {
let fileInput = document.getElementById('file-upload');
let file = fileInput.files[0];
if (file) {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function() {
let base64 = reader.result;
let exif = EXIF.readFromBinaryFile(base64ToArrayBuffer(base64));
if (exif && Object.keys(exif).length > 0) {
document.getElementById('result').innerHTML = "選択された画像にはexif情報が含まれています。"
} else {
document.getElementById('result').innerHTML = "選択された画像にはexif情報が含まれていません。"
}
}
} else {
document.getElementById('result').innerHTML = "";
}
}
// base64データをArrayBufferに変換
function base64ToArrayBuffer(base64) {
let binaryString = window.atob(base64.split(',')[1]);
let len = binaryString.length;
let bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
bytes[i] = binaryString.charCodeAt(i);
}
return bytes.buffer;
}
</script>
</body>
</html>
```
ジョークとしては、exif情報を読み込むと「撮影時刻」「焦点距離」「露出時間」などの情報を表示できることから、「写真撮影者が撮影時に何をしていたかがばれてしまうかもしれない！」ということで、プライバシーに関する注意喚起をするなど、遊び心を入れることができます。
