ローカル画像を表示する方法
ファイルをアップロードする前のプレビュー表示など、ユーザーがサーバーにアップロードしなくても画像をウェブページ上に表示する方法です。データURI形式で表示する方法と、Blob URLで表示する方法の2種類があります。
サンプルコード
Blob URL、またはData URIを取得し、それをそのままimg要素のsrc属性に指定すれば表示できます。
<input id="target" type="file" multiple>
Blob URL
document.getElementById( "target" ).addEventListener( "change", function() {
var fileList = this.files ;
for( var i=0,l=fileList.length; l>i; i++ ) {
var blobUrl = window.URL.createObjectURL( fileList[i] ) ;
}
} ) ;
Data URI
document.getElementById( "target" ).addEventListener( "change", function() {
var fileList = this.files ;
for( var i=0,l=fileList.length; l>i; i++ ) {
var fileReader = new FileReader() ;
fileReader.onload = function() {
var dataUri = this.result ;
}
fileReader.readAsDataURL( fileList[i] ) ;
}
} ) ;
デモ
Blob URL
Blob URLとは端末内にあるファイルのURLです。このBlob URLを作成して参照することで、ウェブページ上でローカル画像を表示することができます。
// <input type="file" id="target" multiple>にchangeイベントを設定
document.getElementById( "target" ).addEventListener( "change", function() {
// フォームで選択された全ファイルを取得
var fileList = this.files ;
// 個数分の画像を表示する
for( var i=0,l=fileList.length; l>i; i++ ) {
// Blob URLの作成
var blobUrl = window.URL.createObjectURL( fileList[i] ) ;
// HTMLに書き出し (src属性にblob URLを指定)
document.body.innerHTML += '<a href="' + blobUrl + '" target="_blank"><img src="' + blobUrl + '"></a>' ;
}
} ) ;
Data URI
Data URIとは画像をテキスト化したものです。このデータをブラウザが解析して画像として表示します。拡張子が.jpg、.pngのファイルよりも容量が約3割ほど大きくなります。
// <input type="file" id="target" multiple>にchangeイベントを設定
document.getElementById( "target" ).addEventListener( "change", function() {
// フォームで選択された全ファイルを取得
var fileList = this.files ;
// 個数分の画像を表示する
for( var i=0,l=fileList.length; l>i; 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] ) ;
}
} ) ;
備考
Data URIとは?
Data URIとは、ウェブページに埋め込められるようにテキスト化した画像のデータです。画像は通常はHTMLなどとは別ファイルとして存在し、HTTPリクエストを通じて読み込みますが、HTTPリクエストが数多く発生することは表示の高速化の上で障害になります。そういったことなど諸々あり、HTTPリクエストを発生させずにテキストとして埋め込める、このData URIという形式のデータが存在しています。下記がData URIの例ですが、膨大なため、途中を端折っています。Blob URLに比べたメリットは、強いて言えば他人にシェアできることです。
data:image/png;base64,iVBORw0KGgoAAAANSUhE ... gKQWOP1oQAAAAASUVORK5CYII=
Blob URLとは?
Blob URLとは、ユーザーの端末内に保存されている画像ファイルを直接表示するための、一時的なURLです。ページ移動するとすぐに無効になってしまいます。このURLに他の端末でアクセスしても無効です。そのため、他人にシェアできないというデメリットがあります。下記は、Blob URLの例です。データURIに比べてとても短いので、用途が合うならばこちらを優先して利用したいところですね。
blob:https%3A//syncer.jp/bbee0776-8357-40e9-844e-69c17828563d
関連記事
- Blob(File)からData URIを作成する方法
- Blob(File)をData URIの文字列に変換します。
- Data URIからBlob(File)を作成する方法
- Data URIの文字列からBlob(File)を作成します。
- ローカル動画を表示する方法
- ユーザーの端末に保存されているローカル動画を表示します。
- CMYKをCMYに変換する方法
- カラーコードをCMYKからCMYに変換します。