JavaScriptでカメラ撮影＆Canvas表示｜HTML5対応サンプルコード付き

スマホやPCのカメラで撮影した画像を、HTML5のCanvasに表示する方法を紹介します。
JavaScriptと<input type="file" accept="image/*;capture=camera">を使って、撮影→表示までを簡単に実装できます。
このページでは、実際に動作するサンプルコードと各ステップの解説を行います。

accept属性にcapture=cameraを追加すると、モバイルの場合はカメラ撮影又はファイルから選択することが出来るようになります。
ただしPCからの場合は、画像(jpg等)ファイルを選択できるだけになります。
javascriptでFileReaderを使うと画像ファイルを読み込んでcanvasに表示できます。

参照ボタンを押して、画像ファイルを選択すると表示します。

ソースコード

<input type="file" accept="image/*;capture=camera" id="getCameraImage" onChange="ImageChange()">
<canvas id="myCanvas" width="240px" height="320px"></canvas>
<script>
  function ImageChange(){
    let can=document.getElementById("myCanvas");
    let context=can.getContext("2d", {willReadFrequently:true});
    let reader=new FileReader();
    reader.onload=function(){
      let img=new Image();
      img.src=reader.result;
      img.onload=function(){
        can.width=img.width;
        can.height=img.height;
        context.drawImage(img,0,0,can.width,can.height);
      }
    }
    let iFile=document.getElementById("getCameraImage").files[0];
    reader.readAsDataURL(iFile);
  }

</script>