HTML5のcanvasにモバイルから写真を撮影して表示

HTML5対応ブラウザであれば、canvasが使えるのでモバイル（Androidの場合はChromeブラウザを使う必要あり）から写真を撮影して表示することができます。
PCからの場合は、画像(jpg等)ファイルを選択して表示させることができます。

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

ソースコード

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