SYNCERのロゴ
アイキャッチ画像

Blob(File)からData URIを作成する方法

JavaScriptで、Blob(File)をbase64エンコードしたData URIに変換するには、fileReaderのreadAsDataURL()を利用します。

サンプルコード

変数、blobにBlobが代入されているものとした時、次のようにData URIに変換します。

var fileReader = new FileReader() ;

fileReader.onload = function() {
	var dataURI = this.result ;
}

fileReader.readAsDataURL( blob ) ;

デモ

このデモのinput要素には、ファイルを1つだけ指定できるようにしてあります。指定したファイルをData URIに変換し、textarea要素に表示します。ファイルサイズが大きいと処理に時間がかかるのでご注意下さい。

// <input type="file" id="target">にchangeイベントを設定
document.getElementById( "target" ).addEventListener( "change", function() {
	// フォームで選択された全ファイルを取得
	var fileList = this.files ;

	// 個数分の画像を表示する
	for( var blob, i=0,l=fileList.length; l>i; i++ ) {
		blob = fileList[i] ;

		// FileReaderオブジェクトを作成
		var fileReader = new FileReader() ;

		// 読み込み後の処理を決めておく
		fileReader.onload = function() {
			// Data URIを取得
			var dataUri = this.result ;

			// HTMLに書き出し (src属性にData URIを指定)
			document.body.innerHTML += '<a href="' + dataUri + '" target="_blank"><img src="' + dataUri + '"></a>' ;
		}

		// ファイルをData URIとして読み込む
		fileReader.readAsDataURL( fileList[i] ) ;
	}
} ) ;

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年7月29日 (土)
コンテンツを公開しました。