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

トップページJavascript CSS講座⇒HTML5のcanvasにモバイルから写真を撮影して表示

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


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

<canvas id="myCanvas" width="240px" height="320px"></canvas>
<input type="file" accept="image/*;capture=camera" id="getCameraImage" onChange="ImageChange()">
<script>
	function ImageChange(){
		var cObj=document.getElementById("myCanvas");
		var context=cObj.getContext("2d");
		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>
			
参照ボタンを押して、画像(jpg)ファイルを選択すると表示します。
Mam's WebSite