解説
ファイルフォーマットは、コンピュータ上でデータを保存する際の規約のことです。保存したデータをまた読み込み直せるように、ファイルの保存形式には、ファイルの種類ごとに、ルールが設けられています。
一般的に広まっており、複数のソフトで読み書きできるファイル形式では、このファイルフォーマットが公開されていることが多いです。そういった際は、自分で仕様を読んで、ソフトを作ることもできます。
画像や音声、動画といったファイルでは、データの内部が圧縮されていて、そのまま見ても意味が分からないことが多いです。しかし、BMPなどの圧縮がされていないデータでは、素直にデータが読めるので、ファイルフォーマットを読む練習などには都合がよいです。
サンプル
PNGのファイルフォーマットに従って、画像の横幅と高さを読み取る処理を、JavaScriptで書いてみます。PNGファイルを読み込むと、画像の横幅と高さ表示します（その他のファイルは読み込まないでください。HTML5の機能が必要になるので、最新のブラウザで利用する必要があります）。
PNGのファイルフォーマットについては、下記を参考にしました。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>「ファイルフォーマット」を読むサンプル</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js">
</script>
<script>
$(function() {
$("#fileButton").change(function(event) {
// 変更されたファイル情報の一覧を配列として取得
var files = event.target.files;
// ファイル情報を1つずつ得て処理していく
for (var i = 0; i < files.length; i ++) {
// ファイル情報を1つ取得
var f = files[i];
// 「FileReader」を作成
var reader = new FileReader();
// ファイル読み取り完了時のイベント
reader.onload = function(e) {
// 8 ビット符号なし整数値の配列を取得
var data = e.target.result;
var buf = new Uint8Array(data);
// イメージヘッダを読み込む
var w = 0, h = 0;
var ihW = 16, ihH = 20;
for (var i = 0; i < 4; i ++) {
w += buf[ihW + i] << (3 - i) * 8;
h += buf[ihH + i] << (3 - i) * 8;
}
// 出力
$("#output").text(
"画像サイズは、"
+ "横" + w + "pixel "
+ "縦" + h + "pixel")
};
// テキストとして読み込む
reader.readAsArrayBuffer(f);
}
});
});
</script>
</head>
<body>
<H1>PNGの画像サイズを調べる</H1>
<input type="file" id="fileButton">
<div id="output"></div>
</body>
</html>
