バイナリデータの画像化　ビットマップデータの作成方法

FFD8FFE0 00104A46 49460001 01020034 00340000 FFDB0043 00030202 03020203

このように得られたバイナリデータをバイナリーかるたの左の図のように各バイトの色で色分けした画像はどのようにしたら作れますか.バイナリデータの表示にはHex fiendかターミナルを用いて行っています.初心者ですがよろしくお願いします.
多分私が作りたいのはビットマップデータだと思います.
私が今使っているPCはMac OSなのですぐにインストールして試すことができないのですが,
Binary Editor BZを使えば,ビットマップが見れるのでしょうか.もし,macでも同様のことができるのであれば教えていただきたいです.

jbpb0

2021/04/29 03:36

https://www.synalysis.net/ は、そういう表示ができるように見えますが、無料のソフトではないため実際試してないので、質問者さんの要望に合うかどうか分かりません

kaeruuuun

2021/04/29 05:35

ありがとうございます. 私が探していたのは無料のものだったので,やはりプログラミングするしかなさそうですね.

行動規範の内容に同意します

回答2件

ベストアンサー

プログラムを実行できる環境さあれば大抵どうにかなる問題なので、どれにすればいいか迷ってしまうかもしれませんね。ブラウザでも再現できるはずです。ビットマップ化はできそうです。以下にサンプルを載せます。（Macでは動作確認していません。継ぎ接ぎです。汚いところ拙いところはご容赦ください）

html
1<!DOCTYPE html>
2<head>
3	<meta charset="utf-8" />
4	<title>read data from file</title>
5</head>
6<body>
7<input type="file" id="input"><br>
8<canvas id="canvasid" width="640" height="240" style="border:1px dotted #eeeeee;"></canvas>
9<hr>
10<pre>
11参考にした分書・引用元：
12javascript ファイル読み取り - Google 検索
13<a href="https://developer.mozilla.org/ja/docs/Web/API/File/Using_files_from_web_applications">Using_files_from_web_applications</a>
14など
15<a href="https://w3c.github.io/FileAPI/#FileReader-interface">
16FileAPI</a>
17<a href="https://ja.javascript.info/file">
18File と FileReader</a>
19<a href="https://www.html5rocks.com/ja/tutorials/file/dndfiles//">
20JavaScript でのローカル ファイルの読み込み - HTML5 Rocks</a>
21<a href="https://javascript.keicode.com/newjs/how-to-read-file-with-file-api.php">
22JavaScript でファイルを読み込む方法 - JavaScript の基本 - JavaScript 入門</a>
23<a href="http://var.blog.jp/archives/62330155.html">
24Blob, ArrayBuffer, Uint8Array, DataURI の変換</a>
25</pre>
26<script>
27inputElement = document.getElementById("input");
28inputElement.addEventListener("change", handleFiles, false);
29
30cv = document.getElementById('canvasid');
31ctx = cv.getContext('2d');
32
33
34
35function handleFiles() {
36	let oFiles = this.files,
37			file = oFiles[0];
38	console.log(file);
39	let maxfilesize = 1024 * 1024;
40	if (file.size > maxfilesize) {
41		alert('File size must be smaller than ' +maxfilesize+ 'B.');
42		return;
43	}
44
45	// FileReader //
46	const reader = new FileReader();
47	reader.readAsArrayBuffer(file);
48	
49	reader.onload = function() {
50		let a = new Uint8Array(reader.result);
51		draw(a);
52  };
53
54  reader.onerror = function() {
55    console.log(reader.error);
56  };
57}
58
59
60
61function draw(a) {
62	cv.width = cv.width; //clear all
63	let x = 0, y = 0;
64	for (let i=0; i<Math.min(a.length, 256); i++) {
65		// SetColor //
66		let o = a[i], r = o, g = o, b = o;
67		if (0x20<=o && o<=0x7E) {
68			r += 128;
69			g = 0;
70			b = 0;
71		} else if (o<=0x1F) {
72			r = 0;
73			g = 63 + 6 * g;
74			b = 0;
75		}
76		// Fill //
77		ctx.fillStyle = 'rgba(' +r+ ',' +g+ ',' +b+ ', 1)';
78		ctx.fillRect(x, y, 20, 15);
79		// Hex //
80		ctx.fillStyle="blue";
81		ctx.font = "15px sans-serif";
82		ctx.fillText(o.toString(16).toUpperCase().padStart(2, '0'), x+1, y+13);
83		// Text //
84		ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)';
85		ctx.strokeRect(x+320.5, y+0.5, 20, 15);
86		ctx.fillStyle="black";
87		ctx.fillText(String.fromCharCode(o), x+326, y+13);
88		x += 20;
89		if (x>300) {
90			x = 0;
91			y += 15;
92		}
93	}
94}
95
96arr = Array(255);
97for (let i=0; i<arr.length; i++) {
98	arr[i] = Math.floor(256 * Math.random());
99}
100//draw(arr);
101</script>
102</body>
103</html>