HTML5のinput[type=file]でカメラ撮影画像を取得し、「ファイルを選択」ボタンではなく画像として表示する方法

JavaScriptのFileReaderで選択した画像をプレビュー表示する

HTML5では、<input type="file" accept="image/*" capture="camera"> を使うことで、スマートフォンなどから直接カメラを起動して画像を撮影・選択できます。しかし、標準のままでは「ファイルを選択」という味気ないボタンが表示されるだけです。

そこで、JavaScriptの FileReader APIを活用すれば、ユーザーが選択した画像をその場で読み込み、<img> 要素として画面にプレビュー表示できます。

HTMLの例

まずはフォームと画像を表示するための要素を用意します。

<form id="myform" runat="server">
   <input type='file' id="myimg" accept="image/*" capture="camera" />
   <img id="preview" src="#" alt="選択された画像" />
</form>

JavaScript（jQuery）の実装例

次に、ファイルが選択されたときに画像を読み込む処理を記述します。

function readURL(input) {
   if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
          $('#preview').attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
   }
}

$('#myimg').on('change', function () {
   readURL(this);
});

コードの解説

• accept="image/*"： 選択できるファイルを画像のみに制限します。
• capture="camera"： モバイルデバイスでカメラを直接起動します。
• readAsDataURL()： 選択された画像ファイルをBase64形式のデータURLとして読み込みます。
• onloadイベント： 読み込み完了後、結果を<img>要素のsrc属性に設定することで、プレビューが表示されます。

この方法を使えば、「ファイルを選択」ボタンの代わりに、ユーザーが選んだ画像を直感的に確認できる使いやすいインターフェースを実現できます。