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] ) ;
}
} ) ;
関連記事
- 2点の座標の中点を求める方法
- 2点の座標の中点を求める公式を、JavaScriptで表現します。
- 画像のサイズを取得する方法
- 画像の本来のサイズを取得するには、img要素のnaturalWidthとnaturalHeightを参照します。
- Data URIからBlob(File)を作成する方法
- Data URIの文字列からBlob(File)を作成します。
- ローカル画像を表示する方法
- ユーザーの端末に保存されているローカル画像を表示します。