Webページ教材開発テキスト
5-6 カメラを使う
タブレット等についているカメラや、
タブレット内に保存してある写真ファイルを利用するプログラムを作ります。
(1) カメラの画像を表示する。
サンプルはこちら
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<title>Webページ教材</title>
<style>
</style>
</head>
<body>
<form>
<input type="file" accept="image/*;capture=camera" id="cameraImage"
src="camera.png" value="カメラ">
</form>
<canvas id="myCanvas" width="900" height="675" style="border:1px
solid black">
</canvas>
<script>
document.getElementById("cameraImage").addEventListener("change",
function(){
var canvasObj = document.getElementById("myCanvas");
var context = canvasObj.getContext("2d");
var canvasW = canvasObj.width;
var canvasH = canvasObj.height;
var reader = new FileReader();
reader.onload = function(evt){
var imgObj = new Image();
imgObj.src = reader.result;
imgObj.onload = function(){
context.drawImage(imgObj,0,0, canvasObj.width, canvasObj.height);
}
}
var imageFile = document.getElementById("cameraImage").files[0];
reader.readAsDataURL(imageFile);
}, false);
</script>
</body>
</html>
]]>
カメラの画像の上で文字をドラッグできるようにします。
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<title>Webページ教材</title>
<style>
.tango{
background-color: #cff;
padding: 10px 10px 10px 10px;
border-radius:4px;
border:1px solid #bbd;
font-size:150%;
cursor:pointer;
opacity:0.6; /* 半透明 */
}
</style>
</head>
<body>
<form>
<input type="file" accept="image/*;capture=camera" id="cameraImage"
src="camera.png" value="カメラ">
<span id="11" class="tango">根→</span>
<span id="12" class="tango">茎→</span>
<span id="13" class="tango">葉→</span>
</form>
<canvas id="myCanvas" width="900" height="675" style="border:1px
solid black"></canvas>
<script>
$(function(){
$("#11,#12,#13").draggable();
});
document.getElementById("cameraImage").addEventListener("change",
function(){
var canvasObj = document.getElementById("myCanvas");
var context = canvasObj.getContext("2d");
var canvasW = canvasObj.width;
var canvasH = canvasObj.height;
var reader = new FileReader();
reader.onload = function(evt){
var imgObj = new Image();
imgObj.src = reader.result;
imgObj.onload = function(){
context.drawImage(imgObj,0,0,canvasObj.width,canvasObj.height);
}
}
var imageFile = document.getElementById("cameraImage").files[0];
reader.readAsDataURL(imageFile);
}, false);
</script>
</body>
</html>
]]>
