投稿者 tel | 2010年4月19日

Firefoxでローカルの画像を表示する

HTML5のファイルAPIを使ってFirefoxでローカルの画像を表示する。

<input type="file" onchange="load(this)" />

filesプロパティにアクセスする。filesは配列になっているのでファイルを1個しか指定していない場合は0。

function load(obj) {
 var img = new Image();
 img.src = obj.files[0].getAsDataURL();
}

データURIに変換して画像のソースにつっこむ。これでローカルの画像をブラウザで表示できる。アップロードの前に画像を確認したり、画像を読み込んでCanvasで加工したりできそう。

Google ChromeだとgetAsDataURLメソッドがなかったので代わりの方法がないか調査中。


Responses

  1. Google ChromeはFileAPIがほとんど実装されていないみたいだ。


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。