次のコードでは、指定したURLの画像を分解して再構成し、ブラウザに表示する。
fetch を使用して画像を取得し、Blobを使って画像を分割して再構成する。
このコードは次の関数等を学習するためのコードである。
fetch()関数
new Blob()で新しいBlobオブジェクト生成
URL.createObjectURL()関数
URL.revokeObjectURL()関数
async/await 非同期プログラミングを行うための構文
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
<style>
</style>
</head>
<body>
このコードでは、指定したURLの画像を分解して再構成し、ブラウザに表示する。<br>
fetch を使用して画像を取得し、Blobを使って画像を分割して再構成する。<br>
<br>
<button id="button">ボタン</button>
<br>
<div id="test">
</div>
<script>
const loadImg = (function() {
// 画像のURL
const imageUrl = 'http://localhost/test13/001.jpg';
// 新しいImageオブジェクトを作成
const imgElement = new Image();
// 画像を読み込んで分解して再構成する関数
async function getImage() {
// 画像を取得
const response = await fetch(imageUrl);
const blob = await response.blob();
// 画像を分解して再構成
const blobParts = [];
const chunkSize = 1024*10; // チャンクサイズ (1KB)
console.log('blob = ', blob);// Blob { size: 350191, type: "image/jpeg" }
for (let i = 0; i < blob.size; i += chunkSize) {
const chunk = blob.slice(i, i + chunkSize);
console.log('chunk = ', chunk);// Blob { size: 10240, type: "" }
blobParts.push(chunk);
}
console.log('blobParts = ', blobParts);// Array(35) [ Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, … ]
// Blobの配列から新しいBlobを作成
const reconstructedBlob = new Blob(blobParts);
const testElement = document.getElementById('test');
console.log('imgElement.src = ', imgElement.src);
if (imgElement.src) {
URL.revokeObjectURL(imgElement.src);
console.warn('URL.revokeObjectURL(imgElement.src)を実行した。');
} else {
console.log('else imgElement.src = ', imgElement.src);
}
// 以前の画像をクリア
if (testElement) {
testElement.innerHTML = ''; // すべての子要素をクリア
}
imgElement.src = URL.createObjectURL(reconstructedBlob);
console.log('imgElement.src = ', imgElement.src);
testElement.appendChild(imgElement);
}
const Button = document.getElementById('button');
// 画像の分解と再構成を実行
Button.addEventListener('click', () => getImage());
})();
</script>
</body>
</html>
別バージョン。for文をwhile文に書き直した。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
<style>
</style>
</head>
<body>
このコードでは、指定したURLの画像を分解して再構成し、ブラウザに表示する。<br>
fetch を使用して画像を取得し、Blobを使って画像を分割して再構成する。<br>
<br>
<button id="button">ボタン</button>
<br>
<div id="test">
</div>
<script>
const loadImg = (function() {
// 画像のURL
const imageUrl = 'http://localhost/test13/001.jpg';
// 新しいImageオブジェクトを作成
const imgElement = new Image();
// 画像を読み込んで分解して再構成する関数
async function getImage() {
// 画像を取得
const response = await fetch(imageUrl);
const blob = await response.blob();
// 画像を分解して再構成
const blobParts = [];
const promises = [];
const chunkSize = 1024*10; // チャンクサイズ (1KB)
console.log('blob = ', blob);// Blob { size: 350191, type: "image/jpeg" }
let offset = 0;
let receivedSize = 0;
const arrayBufferList = [];
while (receivedSize !== blob.size) {
const chunk = await blob.slice(offset, offset + chunkSize).arrayBuffer();
console.log('chunk = ', chunk);//ArrayBuffer { byteLength: 10240 }
receivedSize += chunk.byteLength;
console.log('receivedSize = ' + receivedSize);
arrayBufferList.push(chunk);
offset += chunkSize;
}
console.log('arrayBufferList = ', arrayBufferList);// Array(35) [ Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, … ]
// arrayBufferListをBlobオブジェクトに変換する。
const reconstructedBlob = new Blob(arrayBufferList);
const testElement = document.getElementById('test');
console.log('imgElement.src = ', imgElement.src);
if (imgElement.src) {
URL.revokeObjectURL(imgElement.src);
console.warn('URL.revokeObjectURL(imgElement.src)を実行した。');
} else {
console.log('else imgElement.src = ', imgElement.src);
}
// 以前の画像をクリア
if (testElement) {
testElement.innerHTML = ''; // すべての子要素をクリア
}
imgElement.src = URL.createObjectURL(reconstructedBlob);
console.log('imgElement.src = ', imgElement.src);
testElement.appendChild(imgElement);
}
const Button = document.getElementById('button');
// 画像の分解と再構成を実行
Button.addEventListener('click', () => getImage());
})();
</script>
</body>
</html>