JavaScriptによるファイルとバイナリデータの扱い

JavaScriptでバイナリデータを扱う

HTML5によりjavascriptでもバイナリファイルが扱いやすくなった。

バイナリファイルにはPDF、画像ファイル、Excelファイルなどがある。
バイナリが扱えるようになればPDFから文字列を取得したり、jpegファイルからexif情報を取得および編集したりといったことが可能になる。

JavaScriptで扱うバイナリデータの形式

バイナリデータの形式説明
arraybufferバイナリデータのバイト配列。
File<input type="file" />で取得できるオブジェクト。 ファイル名やファイルサイズなどが取得できる。ブラウザがバイナリデータを内部的に保持する。
BlobBlobはMySQLが扱うバイナリデータ形式。ブラウザがバイナリデータを内部的に保持する。
base647bitしか扱えないような環境に適したバイナリデータ形式。 バイナリデータをAjaxで送受信するときに利用できる。
Data URL Scheme バイナリデータをURL形式の文字列として扱う。URLの一種なのでimg要素やアンカー要素にセットできる。
小さめのバイナリデータ向きで、HTMLに直接記述可能。
Blob URL Scheme URLの一種なので、URLをセットできる要素で利用できる。
大きめのバイナリデータ向きだが、HTMLに直接記述は不可（プログラム中で動的に作成）。バイナリデータはブラウザが内部的に保持する。
Uint8Arrayarraybufferのデータを8ビット符号整数として読み書きできる。
DataViewarraybufferを扱うオブジェクト。バイトオーダや符号を指定してデータを読み出すメソッドが用意されている。Uint8Arrayより遅い。

Image file upload in BASE64 format | Base64方式の画像アップロード

画像をBase64形式の文字列に変換して、サーバーにアップロードする。
サーバー側ではBase64文字列を画像ファイルに再構築する。

実質、ただのテキスト送信なので多くの環境で動作すると期待できる。
ただテキストは長文になってしまうが・・・。

弱点
画像をBase64に変換するとデータ量が30%ほど増える。

HTML


	<input id="file1" type="file" name="file1" multiple />

JavaScript


	//ファイルアップロードイベント
	$('#file1').change(function(e) {
		
		var files = e.target.files;
		var oFile = files[0];
		m_file_name = oFile.name;
		
		var reader = new FileReader();
		reader.readAsDataURL(oFile);

		
		//ファイル読込成功イベント
		reader.onload = function(e) {

			// データURLスキームを取得
			var data_url_scheme = reader.result;

			// データURLスキームからbase64形式のバイナリデータに変換する
			var base64 = btoa(data_url_scheme);
			base64 = base64.replace(/^.*,/, '');
			
			// URLエンコード
			var file_name = encodeURIComponent(m_file_name);
			

			$.ajax({
				type: "POST",
				url: "file_upload_base64.php",
				data: 'base64=' + base64 + '&file_name=' + file_name,
				cache: false,
				dataType: "text",

				success: function(res, type) {
					
					$('#res').html(res);

		
				},
				
				error: function(xmlHttpRequest, textStatus, errorThrown){
					console.log(xmlHttpRequest.responseText);
					alert(textStatus);
				}
				
			});// ajax
			
			

		}// reader.onload
		

	});// $('#file1').change

PHP


	$base64=$_POST['base64'];
	$file_name=$_POST['file_name'];
	
	$file_name = urldecode ($file_name);
	$file_name = 'img/'.$file_name;
	echo $file_name;
	
	
	// BASE64バイナリ文字列をファイルに変換して書き出す
	$base64 = base64_decode($base64);
	$base64 = preg_replace("/data:[^,]+,/i","",$base64);
	$base64 = base64_decode($base64);
	file_put_contents($file_name, $base64);


img要素にデータURLスキームを指定して画像を表示する

File ApiのFileReaderを利用したファイルアップロードで、サーバーに画像データを送ることなく画像表示できる。

html

	<input id="file1" type="file" multiple /><br>
	<img  id="img1" src=""/>

JavaScript

	$( function() {
		//ファイルアップロードイベント
		$('#file1').change(function(e) {
			//ファイルオブジェクト配列を取得（配列要素数は選択したファイル数を表す）
			var files = e.target.files;
			var oFile = files[0];
	
			var reader = new FileReader();
			reader.readAsDataURL(oFile); // データURLスキーム取得処理を非同期で開始する
		
			// データURLスキームを取得後に実行される処理
			reader.onload = function(evt) {
				// img要素にデータURLスキームをセットし、画像表示する。
				$('#img1').attr('src',reader.result);
			}
		});
	});

サンプル

サーバー上のファイルからBlob,arraybufferを取得する方法

サーバー上のファイルから、バイナリデータであるarraybufferを取得するには、AJAXを使う。

Blob

arraybufferとコンテンツタイプ からBlobオブジェクトを生成することができる。
BlobオブジェクトはさらにBlob URL Schemeに変換できる。
Blob URL SchemeはURLの一種なので、img要素などURL関係の処理に利用できる。

下記のサンプルソースコードは、サーバー上のバイナリであるsmp1.pngから、 arraybufferの取得およびBlobを生成する例である。

javascript

	function test1(){
		var xhr = new XMLHttpRequest();
		xhr.open('GET', 'smp1.png', true);
		xhr.responseType = 'arraybuffer';
		xhr.onload = function(e) {
			
			// arrayBufferを取得する
			var arrayBuffer = this.response;
	
			// Blobを生成する
			var blob = new Blob([arrayBuffer], {type: "image/png"});
			console.log(blob);
			
			// BlobをBlobURLスキームに変換して、img要素にセットする。
			var blob_url = window.URL.createObjectURL(blob);
			$('#img1').attr('src',blob_url);
		};
		xhr.send();
	}
サンプル

参考リンク

バイナリファイルをAjaxで取得する際に注意する点
JavaScript typed arrays を使ったバイナリデータの受信

サーバー上のファイルからBlobを取得する

HTML 
	<img id="img1" src="" />
JavaScript 

	var xhr = new XMLHttpRequest();
	xhr.open('GET', fp, true);
	xhr.responseType = 'blob';
	xhr.onload = (e) => {
		
		// Blobを取得する
		var blob = e.target.response;

		// BlobをBlobURLスキームに変換して、img要素にセットする。
		var blob_url = window.URL.createObjectURL(blob);
		$('#img1').attr('src',blob_url);

	};
	xhr.send();

XMLHttpRequestでファイルを読み込みMIME,サイズ,更新日,ファイル名を取得する

	var fp = "upload_files/imori.jpg";
	
	var xhr = new XMLHttpRequest();
	xhr.open('GET', fp, true);
	xhr.responseType = 'blob';
	xhr.onload = (e) => {
		
		// Blobを取得する
		var blob = e.target.response;

		var mime_type = getResponseHeader("Content-Type");
		var size = xhr.getResponseHeader("Content-Length");
		var server = xhr.getResponseHeader("server");
		var modified = xhr.getResponseHeader("Last-Modified");
		var r_url = e.target.responseURL;
		  
		console.log(mime_type); // MIME
		console.log(size); // サイズ（容量）
		console.log(server); // サーバー情報
		console.log(modified); // 更新日
		console.log(r_url); // ファイル名を含むURL
		
		// BlobをBlobURLスキームに変換して、img要素にセットする。
		var blob_url = window.URL.createObjectURL(blob);
		$('#img1').attr('src',blob_url);

	};
	xhr.send();

XMLHttpRequestでファイルを読み込みヘッダー情報を出力する

JavaScript 
	var fp = "upload_files/imori.jpg";
	
	var xhr = new XMLHttpRequest();
	xhr.open('GET', fp, true);
	xhr.responseType = 'blob';
	xhr.onload = (e) => {
		
		// Blobを取得する
		var blob = e.target.response;
		  
		  // ヘッダー情報を出力
		  console.log(xhr.getAllResponseHeaders());
		
		// BlobをBlobURLスキームに変換して、img要素にセットする。
		var blob_url = window.URL.createObjectURL(blob);
		$('#img1').attr('src',blob_url);

	};
	xhr.send();

コンソール出力 
	date: Mon, 13 Aug 2018 01:06:23 GMT
	last-modified: Sat, 11 Aug 2018 14:02:29 GMT
	server: Apache/2.4.29 (Win32) OpenSSL/1.0.2n PHP/7.1.14
	accept-ranges: bytes
	etag: "20e55-573294f9aa9f8"
	content-length: 134741
	content-type: image/jpeg

FileReaderについて

FileReaderはFile APIの機能であり、ファイルアップロードで使う。
アップロードしたファイルデータをバイナリデータとして取得できる
ファイルアップロードの進捗状況を検知することもできる。

html 
<input id="file1" type="file" multiple />

javascript 
	$( function() {
	
		//ファイルアップロードイベント
		$('#file1').change(function(e) {
	
			var files = e.target.files;
			var oFile = files[0];
	
			var reader = new FileReader();
			reader.readAsDataURL(oFile);
		
			//ファイル読込成功イベント
			reader.onload = function(evt) {
				
				// データURLスキーム形式のバイナリデータ
				console.log(reader.result);
				
				// base64形式のバイナリデータ
				var base64 = btoa(reader.result);
				console.log(base64);
			}
		});
	
	});

バイナリデータの種類

取得できるバイナリデータの形式は、 データURLスキーム、 base64、blob、16進数バイナリデータなど。
これらのデータをJavaScriptで扱える。
バイナリデータだけでなくアスキー（テキスト）も取得できる。

データURIスキームとは | Data URL Scheme

データURLスキームとはhtmlページ内に、文字列として埋め込むことができるバイナリデータである。
htmlのimg要素にデータURLスキームを指定することにより、画像ファイルなしで画像を表示させることができる。

画像サイズが小さい場合、外部ファイルとするよりも、データURLスキームとしたほうが効率が良い。
画像ファイルは読み込むたびにHTTPリクエストが発生するが、データURLスキームにすればページ読込時のHTTPリクエスト1回で済むからである。

サーバーに依存せずにバイナリデータを扱える

ファイルアップロードによる画像表示を行う場合、従来の方法だと、一度サーバー側に画像をアップしてから画面表示するという流れになる。
しかし、データURLスキームを使えば、ブラウザ側だけで上記の流れを実現できる。サーバー側は一切関与しない。

メリット

  1. HTMLファイル１つだけで画像表示ができる。
  2. 小さい画像を多く表示するページである場合、HTTPリクエストの実行数が少なくなり、トラフィックを減らせる。
  3. 電子メールにて添付ファイルなしで画像表示できる。
  4. JavaScriptでバイナリデータを扱える。
  5. バイナリを文字列データとして扱えるため、プログラムで活用できる。

デメリット

  1. キャッシュされないため、ブラウザをリロードするたびに画像データを読み直すことになる。
  2. 古いブラウザでは未対応。
  3. 30%ほどサイズが増える。
  4. htmlファイルに非常に長い文字列を記述することになる。
  5. 100Mを超えるようなサイズだと、非常に処理が重たくなる。

データURLスキームの構造

data:[content-type];[charset],データ文字列

データURLスキームの例

<img  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAMCAIAAAA7y9DJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAA8SURBVChTY/hPCJCiQmmjDzKCisJVoElDEESKRBU7q8Lh0kAEkUJXgawIIoVwKRBAVEA5MDAAKrCA//8BTMVCj0IpR1QAAAAASUVORK5CYII=">
上記のデータURLスキームによる画像→

base64

ZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFBc0FBQUFNQ0FJQUFBQTd5OURKQUFBQUFYTlNSMElBcnM0YzZRQUFBQVJuUVUxQkFBQ3hqd3Y4WVFVQUFBQUpjRWhaY3dBQURzTUFBQTdEQWNkdnFHUUFBQUE4U1VSQlZDaFRZL2hQQ0pDaVFtbWpEektDaXNKVm9FbERFRVNLUkJVN3E4TGgwa0FFa1VKWGdhd0lJb1Z3S1JCQVZFQTVNREFBS3JDQS8vOEJUTVZDajBJcFIxUUFBQUFBU1VWT1JLNUNZSUk9
データURLスキームはbase64と似るがデータ文字列は異なる。

データURLスキームをimg要素にセットして画像表示

$('#img1').attr('src',data_url);

img要素の src属性にデータURLスキーム(data_url)をセットすることにより画像表示できる。

データURLスキームをa要素にセットしてダウンロードリンクを作成

html 
<a id="a_dl" href="" download >ダウンロード</a><br>

javascript 
$('#a_dl').attr('href',data_url);

a要素の href属性にデータURLスキーム(data_url)を指定することにより、ダウンロードリンクを作成することができる。
ダウンロードリンクをクリックすると、データURLスキームから生成されたファイルをダウンロードすることができる。
a要素の属性に「download」を追加するのを忘れないように。

データURLスキームからBASE64に変換する

var base64 = window.btoa(data_url);

btoa関数を利用してデータURLスキームから BASE64に変換できる。

BASE64からデータURLスキームに変換する

var data_url = window.atob(base64);

atob関数を利用してBASE64から データURLスキームに変換できる。

base64とは

バイナリデータを64種類の英数字のみで記述した文字列データである。
7bitしか扱えないような環境で利用できる。

javascriptでバイナリデータを送受信する際、base64形式に変換する場面は多々ある。
画像をbase64に変換してAjax送受信するなどが可能。

電子メールでも利用されている。
MIMEに指定できる形式のひとつ。
バイナリからbase64に変換すると容量が30%くらい増加する弱点がある。

Blobとは

Blobとはバイナリデータの１つで、 Binary Large Objectの略。
Blob オブジェクトは、コンテンツタイプ (MIME)と バッファ情報（Uint8Array）の２つから構成される。
JavaScriptでよく使われるが、JavaScript由来のデータ形式でない。

JavaScript

Blobオブジェクトとして取り扱われる。
BlobオブジェクトはFileオブジェクトの原型である。

応用

画像のBlobオブジェクトをBlob URL Schemeに変換して、Img要素のsrc属性にセットし、画像表示できる。
Blob URL Schemeをアンカーリンクに指定することにより、ファイルダウンロードも実現できる。
MySQLにもBlob形式というのが存在する。
参考：基本的なBlobの作成

参考リンク

基本的なBlobの作成

Blobオブジェクトは、データソースとオプション情報から生成する。
データソースはUint8Arrayで取得した8bit数値配列形式のバイナリデータである。
オプション情報は、コンテンツタイプ （MIME）などから構成される。

Blobはバイナリデータだけでなく、テキストデータも扱える。

javascript

	// データソース。8bit数値配列形式のバイナリデータ。
	var i8ary = new Uint8Array([137,80,78,71]);
	var source = [ i8ary ];

	// オプション情報。コンテンツタイプ（MIME）など。
	var option = {
		type: "application/octet-binary"
	};

	// blobを作成
	var blob = new Blob( source , option );

サンプル
Blob と File クラスについて

Blob URL Schemeとは

Blob URL Scheme（Blob URL スキーム)とは、バイナリデータを保持するURLの一種である。
URLなのでimg要素にセットして画像表示したり、a要素にセットしてファイルダウンロードさせたりできる。

バイナリデータは、Blob URL Schemeの文字列に埋め込まれているのでなく、ブラウザ側で確保されている。
そのため、静的にHTMLへ直接埋め込むという方法は使えない。
そのかわり、100MBを超えるような大容量のバイナリデータも扱える。
Blob URL Schemeの文字列には乱数文字列程度しか記述されていない。

Blob URL Schemeの文字列
blob:http%3A//localhost/6ce1fb2c-af5d-435a-b12a-6fb9fbe16f00

類似するものにData URL Schemeがある。
詳しくは「Blob URL SchemeとData URL Schemeの違い」参考。

Blob URL Schemeの作成方法

Blob URL SchemeはBlobオブジェクトから「window.URL.createObjectURL」関数で作成できる。
サンプル：サーバー上のファイルからblobを作成する 
	function test1(){
		var xhr = new XMLHttpRequest();
		xhr.open('GET', 'smp1.png', true);
		xhr.responseType = 'arraybuffer';
		xhr.onload = function(e) {
			
			var arrayBuffer = this.response;
	
			// Blobを生成する
			var blob = new Blob([arrayBuffer], {type: "image/png"});
			console.log(blob);
			
			// BlobをBlobURLスキームに変換して、img要素にセットする。
			var blob_url = window.URL.createObjectURL(blob);
			$('#img1').attr('src',blob_url);
		};
		xhr.send();
	}

参考リンク

Blob URL Scheme とは？

Blob URL Scheme とData URL Schemeの違い

Blob URL SchemeとData URL Schemeは、 どちらもコンテンツタイプとバイナリデータからなるURLの一種である。

Blob URL SchemeData URL Scheme
大きめのデータ向け。小さめのデータ向け。
HTMLに直接、静的に書き込むことはできない。HTMLに直接、静的に書き込むことができる。
データはブラウザが保持。データは、ただのテキストである。
100MBを超えるデータにも耐えられる。小さい画像ファイルの代わりにData URL Schemeにすると、高速化できる。

参考リンク

Blob URL Scheme について
Data URI Scheme について

MIMEとコンテンツタイプ

MIMEとは

電子メールの規格として考案された。
Multipurpose Internet Mail Extension（多目的インターネットメール拡張）
インターネットの電子メールでさまざまなフォーマット（書式）を扱えるようにする規格である。
電子メールだけでなく、html,javascriptなどweb系技術でもよく使われている。
主なデータに Content-Typeと Content-Transfer-Encodingがある。

MIMEの主なパラメータ

パラメータ説明
Content-Typeコンテンツタイプ。コンテンツの種類を表す。MIMEというとこちら示すほど重要である。
Content-Transfer-Encoding符号方式。データを送信するときの変換方法である。7bit,8bit,binary,base64などがある。デフォルトは7bit。
Content-Description任意で書いてよい説明文のようである。
Content-Dispositionファイル名を指定するようである。

Content-Type | コンテンツタイプ

MIMEというと単にこちらを指すことがある。
様々なプログラムはContent-Typeを見て、データの処理方法を決める。
2つの名前から構成されている。例えばtext/plainは、plainをプログラムが理解できないならtextという扱うという意味である。

コンテンツタイプ説明
text/plainプレーンテキスト
text/htmlHTMLテキスト
application/xhtml+xmlXHTMLテキスト
image/gifGIF画像
image/jpegJPEG画像
image/pngPNG画像
video/mpegMPEG動画
application/octet-stream任意のバイナリデータ
application/pdfPDF文書
multipart/alternativeHTMLメールがHTMLとプレーンテキストに分けられるように、同じ情報を異なる形式で見れるようにする。
application/x-www-form-urlencodedHTTPのPOSTメソッドによるフォームデータの送信。
multipart/form-dataファイルアップロード（<input="file" />）のときに使われる。HTMLのform要素に指定される。
x-○○x-で始まる独自の名称を使うことができる（例: application/x-gzip）

MIMEのContent-Transfer-Encoding

符号化という。
データを送信するとき、どの方法で符号化つまり変換するかを表す。
ASCII 文字列に符号化する。
電子メールはASCII 文字列しか使えないので考案された。

Content-Transfer-Encodingの値説明
7bitデフォルトはこれ。
8bitあまり見かけず。特別なプロトコルが使うらしい。
binaryあまり見かけず。特別なプロトコルが使うらしい。
quoted-printableあまり見かけず
base64よく見かける。バイナリデータを7bitのテキストとして扱う。

参考サイト

MIME の基礎

FileReaderでBlobを読み取る

FileReaderはFileオブジェクトだけでなく、Blobオブジェクトも読み込むことができる。
下記のサンプルでは、サーバー上の画像ファイルからBlob を取得し、そのBlobをFileReaderで読み込む例である。

javascript

	function test1(){
		
		// サーバー上の画像ファイルから、Ajaxを利用してバイトデータ(arraybuffer)を取得する
		var xhr = new XMLHttpRequest();
		xhr.open('GET', 'smp1.png', true);
		xhr.responseType = 'arraybuffer';
		xhr.onload = function(e) {
			
			// 画像ファイルのバイトデータを取得する
			var arrayBuffer = this.response;
	
			// バイトデータとコンテンツタイプからBlobを生成する
			var blob = new Blob([arrayBuffer], {type: "image/png"});
	
			// ★FileReaderでBlobを読み取る
			var reader = new FileReader();
			reader.readAsDataURL(blob);
		
			// Blob読込後のイベント
			reader.onload = function(evt) {
				
				// データURLスキームを取得する
				var data_url = reader.result;
				console.log(data_url);
				
				// データURLスキームを画像表示させる。
				$('#img1').attr('src',data_url);
				
				// データURLスキームからbase64形式に変換してみる
				var base64 = btoa(data_url);
				console.log(base64);
			}
		};
	
		xhr.send();
	}
サンプル

UTF-8文字列からbase64に変換する

UTF8文字列からBASE64文字列に変換することができる。
BASE64に変換することにより、WEB上の文字列を .txt、.csvなどのテキストファイルとしてダウンロードする、といったことができるようになる。
BASE64からUTF8文字列に変換することも可能である。

javascript 
	function test1(){
		var text1 = 'いろは';
		var b64 = utf8_to_b64(text1);// utf8からbase64に変換する
		var text2 = b64_to_utf8(b64);// base64からutf8に変換する
		
		console.log(b64);
		console.log(text2);
	}
	
	// utf8からbase64に変換する
	function utf8_to_b64(str) {
		return window.btoa( unescape(encodeURIComponent(str)));
	}
	
	// base64からutf8に変換する
	function b64_to_utf8(str) {
		return decodeURIComponent( escape(window.atob(str)));
	}

consoleへの出力 
	44GE44KN44Gv
	いろは
サンプル

BASE64とMIMEコンテンツタイプからBLOBを作成する

BASE64とMIMEコンテンツタイプからBlobオブジェクトを作成する関数サンプル。
日本語の文字化けにも対応している。

javascript 
	/**
	 * BASE64とMIMEコンテンツタイプからBlobオブジェクトを作成する。
	 * 日本語対応。
	 * 
	 * @param base64
	 * @param mime_ctype MIMEコンテンツタイプ
	 * @returns Blob
	 */
	function toBlob(base64,mime_ctype) {
		// 日本語の文字化けに対処するためBOMを作成する。
		var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
		
	    var bin = atob(base64.replace(/^.*,/, ''));
	    var buffer = new Uint8Array(bin.length);
	    for (var i = 0; i < bin.length; i++) {
	        buffer[i] = bin.charCodeAt(i);
	    }
	    // Blobを作成
	    try{
	        var blob = new Blob([bom,buffer.buffer], {
	            type: mime_ctype,
	            
	        });
	    }catch (e){
	        return false;
	    }
	    return blob;
	}

サンプル

BASE64をテキストファイルとしてダウンロードする

BASE64をBlobを経てBlobURLスキームに変換する。
BlobURLスキームをa要素にセットすれば、ダウンロードリンクの完成である。

html

	<input type="button" value="TEST1" onclick="test1()"  />
	<a id="txt_dl" href="" >ダウンロード</a><br>

javascript

	function test1(){

		var text1 = "いろは";
		
		// utf8からbase64に変換する。
		var b64 = utf8_to_b64(text1);

		// Blobを BASE64とMIMEコンテンツタイプから作成する。
		var mime_ctype = "text/plain";
		var blob = toBlob(b64,mime_ctype);
		
		// BlobURLスキームをBlobから作成する。
		var blob_url = window.URL.createObjectURL(blob);
	
		// a要素にBlobURLスキームをセットしてダウンロードできるようにする。
		$('#txt_dl').attr('href',blob_url);
		$('#txt_dl').attr('download','test.txt');

	}

サンプル

canvasからBASE64を作成する

canvas要素からデータURLスキームを取得することができ、 そのデータURLスキームからBASE64に変換作成できる。

html 
	<canvas id="canvas1"></canvas>

javascript 
	// canvas要素から描画コンテキストを取得する
	var canvas = document.getElementById('canvas1');
	var ctx = canvas.getContext('2d');
	
	// canvasへ適当に描画する
	ctx.beginPath();
	ctx.moveTo(10,150);
	ctx.lineTo(70,10);
	ctx.lineTo(150,150);
	ctx.lineTo(10,40);
	ctx.lineTo(140,50);
	ctx.closePath();
	ctx.stroke();
	
	// canvasからデータURLスキームを経由し、BASE64を取得する
	var mime_type = "jpeg/image";
	var data_url = canvas.toDataURL(mime_type);// canvasからデータURLスキームを取得する。
	var base64 = window.btoa(data_url);// データURLスキームからBASE64を作成する。
	console.log(base64);


サンプル
  1. ホーム
  2. プログラミングの覚書目次
  3. JavaScriptの覚書
  4. JavaScriptによるファイルとバイナリデータの扱い