次のコードでは、画像をBlobオブジェクトに変換後にBlob URLを生成する。
このコードは次の関数等を学習するためのコードである。
fetch()関数
new Blob()で新しいBlobオブジェクト生成
URL.createObjectURL()関数
URL.revokeObjectURL()関数
async/await 非同期プログラミングを行うための構文
arrayBufferオブジェクトをBlobオブジェクトに変換する。
arrayBuffer()メソッドを使ってarrayBufferオブジェクトに生成する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
<style>
</style>
</head>
<body>
画像を Blob オブジェクトに変換後にBlob URLを生成する。<br>
<br>
<button id="button">ボタン</button>
<br>
<div id="test">
</div>
<script>
// 画像を Blob オブジェクトに変換後にBlob URLを生成する。
const loadImg = (function() {
// 画像のURL
const imageUrl = 'http://localhost/test13/001.jpg';
// 新しいImageオブジェクトを作成
const imgElement = new Image();
const Button = document.getElementById('button');
async function getImage() {
// 画像を取得
const response = await fetch(imageUrl);
const arrayBuffer = await response.arrayBuffer();
const testElement = document.getElementById('test');
console.log('arrayBuffer = ', arrayBuffer);// ArrayBuffer { byteLength: 350191 }
// arrayBufferListをBlobオブジェクトに変換する。
// 第2引数はなくてもOK
// const reconstructedBlob = new Blob([arrayBuffer], { type: "image/jpeg" });
const reconstructedBlob = new Blob([arrayBuffer]);
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);
}
imgElement.src = URL.createObjectURL(reconstructedBlob);
// 以前の画像をクリア
if (testElement) {
testElement.innerHTML = ''; // すべての子要素をクリア
}
console.log('imgElement.src = ', imgElement.src);
testElement.appendChild(imgElement);
}
// 実行する。
Button.addEventListener('click', () => getImage());
})();
</script>
</body>
</html>