HTML上にバイナリデータから画像を復元する方法
今回はHTML上にバイナリデータから画像を復元する方法を紹介します。
用意するもの
復元に必要なのは元画像のバイナリデータと、横幅、縦幅なので、それらを用意します。
自前で用意したい場合は以下のコードで取得できます。
byteToImage.js
//ここだけ取得したいimage要素のIDに変更
const img = document.getElementById('img');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
//width取得
console.log(img.width);
//height取得
console.log(img.height);
//画像のバイナリデータ取得
console.log(imageData.data.toString());
今回は以下の画像から復元します。
取得した値はこちらで、JavaScriptで配列に入れておきます。(バイナリデータは2057600と長くなるので省略)
//元画像の横と縦
const width = 800;
const height = 643;
//元画像のバイナリデータ
const bytes = [
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,...........
];
バイナリデータから画像を復元する
バイナリデータから画像を復元するには、以下のようなコードを使います。
byteToImage.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>byteToImage</title>
</head>
<body>
<img id="img" src="" alt="" />
</body>
<script src="./byteToImage.js"></script>
<script>
//復元した画像を表示するimageタグ
const img = document.getElementById("img");
//縦と横を指定する。値に注意※1
img.width = width;
img.height = height;
const pixels = new Uint8Array(bytes);
// ImageDataを作成
const imageData = new ImageData(
new Uint8ClampedArray(pixels.buffer),
img.width,
img.height
);
//作成した画像データをcanvasを通じてimageタグに表示する
const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
const context = canvas.getContext("2d");
context.putImageData(imageData, 0, 0);
img.src = canvas.toDataURL();
//今回は画像が大きかったので表示の際に1/3のサイズに縮小
img.width = img.width / 3;
img.height = img.height / 3;
</script>
</html>
※1
new ImageData()の際に元画像のwidth * height * 4した値がバイト数と一致していないとエラーになるので注意してください。
今回だったらwidthが800,heightが643になって、バイト数が2057600です。
800 * 643 * 4 = 2057600 です。
以上です！