Javascript でリモートの画像、動画、音声ファイルをBase64に変換し取得する

このタイトルで、内容が上手く伝わるかどうか自信がありませんが、WEBページから、ローカルのファイルを参照する場合、例えばファイルをアップロードするときなどですが、HTMLの機能や、Javascript の FileReader などを利用します。自分でも、以前こんな記事を書きました。このようなローカルのファイルへのアクセスではなくて、リモートのファイルを Javascript で扱う場合を、いろいろ試してみました。

例えば，画像をWEBページに表示するときには、img タグで指定して，下記のように読み込みますが，

<img src="./sample.gif" >

上記のような位置にあるリモートファイルの内容を Base64 で取得したいと思います。

参照サイト

最初に、画像を読み込んでみます。

<html>
<head>
<meta charset="utf-8">
<title>sample</title>
</head>
<body>

</body>
<script type="text/javascript">

var tmpDOM = document.createElement('img');

tmpDOM.onload = function() {

	var b64 = ImageToBase64(tmpDOM, 'image/jpeg');
	
	console.log(b64);
	
	document.body.appendChild(tmpDOM);
}

tmpDOM.src = './grizzly.jpg';

function ImageToBase64(img, mime_type) {

	var canvas = document.createElement('canvas');
	
	canvas.width  = img.width;
	canvas.height = img.height;

	var ctx = canvas.getContext('2d');
	
	ctx.drawImage(img, 0, 0);

	return canvas.toDataURL(mime_type);
}

</script>
</html>

画像が png であれば、mime type を変更する必要があります。canvas の機能（canvas.toDataURL）を使って、base64 のデータを得ています。

次に動画を読み込んでみます。

<html>
<head>
<meta charset="utf-8">
<title>sample</title>
</head>
<body>

</body>
<script type="text/javascript">

var tmpDOM = document.createElement('video');

tmpDOM.onloadedmetadata = function() {

	var b64 = videoToBase64(tmpDOM, 'video/mp4');
	
	console.log(b64);
	
	document.body.appendChild(tmpDOM);
	
	tmpDOM.controls = true;
}

tmpDOM.src = './Bootsy.mp4';

function videoToBase64(tmpDOM, mime_type) {

	var canvas = document.createElement('canvas');

	canvas.width  = tmpDOM.videoHeight;
	canvas.height = tmpDOM.videoWidth;

	var ctx = canvas.getContext('2d');
	ctx.drawImage(tmpDOM, 0, 0);

	return canvas.toDataURL(mime_type);
}

</script>
</html>

余分なところもあるのかもしれませんが、画像と似たようなやり方で、base64 に変換されたデータを取得できます。

続いて、音声です。

<html>
<head>
<meta charset="utf-8">
<title>sample</title>
</head>
<body>

</body>
<script type="text/javascript">

var tmpDOM = document.createElement('audio');

fetch('./voa.mp3')
	.then(response => response.blob())
	.then(blobdata => {
		
		var reader = new FileReader();
		
		reader.addEventListener("loadend", function() {
		
			var b64 = reader.result.toString();
			
			console.log(b64);
			
			tmpDOM.src = b64;									
			document.body.appendChild(tmpDOM);									
			tmpDOM.controls = true;
			
		});
		
		reader.readAsDataURL(blobdata);

	});					


</script>
</html>

fetch を使えば、他の画像も動画も読めるのではないかという気がしますが、とにかく音声が一番ややこしかった。

以上です。