次のコードでは、画像をBlobオブジェクトに変換後にBlob URLを生成する(その2)。
このコードは次の関数等を学習するためのコードである。
new Blob()で新しいBlobオブジェクト生成
URL.createObjectURL()関数
URL.revokeObjectURL()関数
async/await 非同期プログラミングを行うための構文
readAsArrayBufferメソッドでfileオブジェクトを読み込む。
(2-1)ファイルを1度に読み込む場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
<style>
</style>
</head>
<body>
画像を Blob オブジェクトに変換後にBlob URLを生成する(その2-1)。<br>
<br>
<form id='fileInfo'>
<input type='file' id='fileInput' multiple name='files'>
</form>
<br>
<button id="button">画像を読み込む</button>
<br>
<br>
<div id="test">
</div>
<script>
// 画像を Blob オブジェクトに変換後にBlob URLを生成する。
const loadImg = (function() {
const fileInput = document.getElementById('fileInput');
const Button = document.getElementById('button');
const testElement = document.getElementById('test');
// 新しいImageオブジェクトを作成
const imgElement = new Image();
const getImage2 = async function() {
const file = fileInput.files[0];
const fileReader = new FileReader();
fileReader.addEventListener('load', evt => {
const arrayBuffer = evt.target.result;
if (arrayBuffer.byteLength === file.size) {
console.log('(arrayBuffer.byteLength/file.size) = (' + arrayBuffer.byteLength + '/' + file.size + ')');
const reconstructedBlob = new Blob([arrayBuffer]);
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);
}
});
const readSlice = function() {
fileReader.readAsArrayBuffer(file);
};
readSlice();
};
// 実行する。
Button.addEventListener('click', () => getImage2());
})();
</script>
</body>
</html>
(2-1)ファイルを分割して読み込む場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
<style>
</style>
</head>
<body>
画像を Blob オブジェクトに変換後にBlob URLを生成する(その2-2)。<br>
<br>
<form id='fileInfo'>
<input type='file' id='fileInput' multiple name='files'>
</form>
<br>
<button id="button">画像を読み込む</button>
<br>
<br>
<div id="test">
</div>
<script>
// 画像を Blob オブジェクトに変換後にBlob URLを生成する。
const loadImg = (function() {
const fileInput = document.getElementById('fileInput');
const Button = document.getElementById('button');
const testElement = document.getElementById('test');
// 新しいImageオブジェクトを作成
const imgElement = new Image();
const chunkSize = 1024 * 5;
const getImage2 = async function() {
const file = fileInput.files[0];
const fileReader = new FileReader();
const arrayBufferList = [];
let offset = 0;
fileReader.addEventListener('load', evt => {
arrayBufferList.push(evt.target.result);
offset += evt.target.result.byteLength;
console.log('offset = ' + offset);
if (offset < file.size) {
readSlice(offset);
}
if (offset === file.size) {
console.log('(offset/file.size) = (' + offset + '/' + file.size + ')');
const reconstructedBlob = new Blob(arrayBufferList);
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);
}
});
const readSlice = function(o) {
const slice = file.slice(o, o + chunkSize);
fileReader.readAsArrayBuffer(slice);
};
readSlice(0);
};
// 実行する。
Button.addEventListener('click', () => getImage2());
})();
</script>
</body>
</html>