<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>OCR + Web Speech APIサンプル</title>
<style>
canvas {
width: 640px;
height: 480px;
background-color: #EEE;
margin: 10px 0;
}
textarea{
width: 640px;
height: 240px;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>OCR + Web Speech APIサンプル</h1>
<div>
<input type="file" id="file" accept="image/*">
</div>
<div>
<canvas id="canvas"></canvas>
</div>
<div>
<textarea id="textarea"></textarea>
</div>
<script>
var VISION = {};
VISION.OCR = function(){
"use strict";
var API_KEY = 'あなたのAPIのキー',
API_URL = 'https://vision.googleapis.com/v1/images:annotate',
canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
canvasW = 640,
canvasH = 480,
originX = 0,
originY = 0,
scale = 1;
var init = function(){
setUploadBtn();
},
setUploadBtn = function(){
var file = document.getElementById('file');
var loadLocalImage = function(e){
var fileData = e.target.files[0],
reader,
img;
if(!fileData.type.match('image.*')) {
alert('画像ではありません。');
return false;
}
reader = new FileReader();
reader.onload = function() {
setCanvas(reader.result);
sendAPI(reader.result.replace(/^data:image\/(png|jpeg);base64,/, ''));
}
reader.readAsDataURL(fileData);
}
file.addEventListener('change', loadLocalImage, false);
},
setCanvas = function(src){
var img = new Image();
canvas.width = canvasW;
canvas.height = canvasH;
ctx.clearRect(0, 0, canvasW, canvasH);
img.src = src;
img.onload = function() {
scale = Math.min(canvas.width / this.width, canvas.height / this.height);
originX = (canvasW / 2) - (this.width / 2) * scale;
originY = (canvasH / 2) - (this.height / 2) * scale;
ctx.drawImage(img, originX, originY, this.width * scale, this.height * scale);
}
},
drawCanvas = function(data){
var x = data[0].x * scale + originX,
y = data[0].y * scale + originY,
w = (data[1].x - data[0].x) * scale,
h = (data[2].y - data[0].y) * scale;
ctx.beginPath () ;
ctx.rect(x, y, w, h) ;
ctx.strokeStyle = "#76FF03";
ctx.lineWidth = 2;
ctx.stroke();
},
sendAPI = function(img){
"use strict";
var httpObj = new XMLHttpRequest(),
data,
body = {
"requests": [
{
"image": {
"content": img
},
"features": [
{
"type":"TEXT_DETECTION",
}
]
}
]
};
httpObj.open('post', API_URL + '?key=' + API_KEY, true);
httpObj.setRequestHeader('Content-Type', 'application/json');
httpObj.onreadystatechange = function(){
if(this.readyState === 4 && this.status === 200){
data = JSON.parse(httpObj.responseText);
setResult(data.responses[0].textAnnotations);
}
};
httpObj.send(JSON.stringify(body));
},
setResult = function(data){
if(typeof data === 'undefined'){
alert('文字を検出できませんでした。')
}else{
VISION.SPEECH().speak(data[0].description);
document.getElementById('textarea').value = data[0].description;
drawCanvas(data[0].boundingPoly.vertices);
}
};
init();
};
VISION.SPEECH = function(){
"use strict";
var uttr = new SpeechSynthesisUtterance();
var init = function(){
uttr.volume = 1;
uttr.rate = 1;
uttr.pitch = 1;
uttr.lang = 'ja-JP';
},
speak = function(text){
uttr.text = text;
window.speechSynthesis.speak(uttr);
};
init();
return {
speak : speak
}
};
VISION.OCR();
VISION.SPEECH();
</script>
</body>
</html>
