IT用語辞典バイナリ | さくいん | サイトマップ | ヘルプ | お気に入りに追加  
HTML5 JavaScript API
IT用語辞典バイナリ<パソコン用語・コンピュータ辞書>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
拡張子辞典<ファイル・変換・変更・表示>
HTML5タグリファレンス
CSS3リファレンス
HTML5 JavaScript API
エクセル関数リファレンス
ITパスポート試験
 
  
  IT用語辞典バイナリ > HTML5 JavaScript API > File APIの使い方 > 画像や音声ファイルの内容を表示または再生するには?
  カテゴリ別さくいん

画像や音声ファイルの内容を表示または再生するには?

画像や音声ファイルの内容を表示または再生するには

解説

DataURL形式(RFC2397で定義されているdata URLスキーム)は画像や音声データをURL文字列に直接埋め込んだもので、audio要素やimg要素で利用可能です。(対応するファイル形式ブラウザimg要素やaudio要素の実装によって異なります)

以下の例では、FileReaderオブジェクトメソッド「readAsDataURL(file)」を利用して読み込んだデータ(自分自身のresult属性に格納される)を画像ファイルとして表示しています。

// imgは画像を表示するimg要素、fは取得したFileオブジェクト
var reader = new FileReader();
reader.onload = function(){
 // 非同期読み込みでは結果はFileReaderオブジェクトのresult属性に格納される
 img.src = reader.result;
}
reader.readAsDataURL(f);

読み込みメソッドが「readAsDataURL(file)」である点と、結果をimg要素のsrc属性に設定している点が、テキスト形式での読み込みとの違いです。

img要素はsrc属性にDataURL形式の文字列が設定されると、画像へとデコードして画面に表示します。これはaudio要素で音声ファイルを再生する場合も同じです。

この方法を利用すると、サーバーへの送信前の画像ファイルプレビューや、ローカルで動作するウェブアプリケーションでの、ユーザーファイルの再生などを簡単に実装することができます。

関連項目




Surface StudioSurface Studio
Microsoftが販売するPC「Surface」シリーズのハイエンドモデル。
Amazon Fire 7Amazon Fire 7
Amazon.comが販売する7インチタブレット。
VAIO Phone AVAIO Phone A
VAIO株式会社が製造するAndroidスマートフォン。

 ・ITパスポート試験とは
 ・試験範囲と内容
 ・サンプル問題にチャレンジ

 ・Windowsの歴史
ジョン・マッカーシー LISPの開発者
ジョン・マッカーシー
人工知能の研究分野における第一人者。
スティーブ・ジョブズ Appleの共同創設者
スティーブ・ジョブズ
「Mac」や「iPhone」を生み出した経営者。
デニス・リッチー C言語、UNIXの開発者
デニス・リッチー
C言語の設計、UNIXの開発に携わった人物。
».m4b MPEG-4オーディオファイルの拡張子。 up!
».m4r iPhoneの着メロにするAACファイルにつく拡張子。 up!
».xlsx Excel 2007で作成したファイルのデフォルトの拡張子。
».docx Word 2007の標準的な保存形式。XML形式となっている。

2017年5月29日現在
ランキング1   ICT (用語辞典)
ランキング2   セグメント (用語辞典)
ランキング3   スワイプ  (用語辞典)
ランキング4   リーンスタートアップ  (用語辞典)
ランキング5   コンテキスト  (用語辞典)
ランキング6   バリデーション  (用語辞典)
ランキング7   ハードコピー  (用語辞典)
ランキング8   輻輳  (用語辞典)
ランキング9   ウォーターマーク  (用語辞典)
ランキング10   メンション  (用語辞典)
RSS 0.91 RSS 1.0 RSS 2.0
IT用語辞典バイナリについてウェブリオ株式会社についてお問い合わせ先テクニカルライター募集利用規約
プライバシーポリシー著作権・商標について協力社一覧Weblio 辞書スマート翻訳英和辞典 - Weblio辞書Weblio英会話
©2012 Weblio, Inc. All rights reserved.