ในบทความก่อนหน้านี้ได้แนะนำเกี่ยวกับ การเรียกใช้ Google Vision (OCR) โดยไม่ต้องพึ่ง Composer สำหรับ PHPไปแล้ว ในบทความนี้จะเกี่ยวกับ JavaScript บ้าง ซึ่งก็อาศัยหลักการเดียวกันคือเรียกใช้งานผ่าน REST API แทนที่จะใช้ Node package manager (npm) หรือ Node.js ตามที่แนะนำในเอกสารโดย Google. ทั้งนี้ในบทความนี้จะเน้นไปที่การทำงานบนเว็บเบราเซอร์เป็นหลัก ดังนั้นการทำงานฝั่ง server หรือ Node.js จะใช้วิธีต่อไปนี้ไม่ได้ หรือผู้อ่านจะต้องดัดแปลงเอาเอง.
สิ่งที่แตกต่างระหว่างการใช้ npm คือ ในแพ็คเกจของ npm เมื่อติดตั้งแล้วจะมีขนาดไฟล์ทั้งหมดกว่า 40 เมกะไบต์และจำนวนไฟล์มากกว่า 4000 ไฟล์.
API key
ขอให้อ้างอิงขั้นตอนการรับ API key จากเอกสารโดย Google.
เตรียมพร้อมไฟล์
จากนี้จะเป็นการสร้างโค้ดตัวอย่างขึ้นมาทดลองการทำงาน ดังนั้นผู้อ่านจะต้องเตรียมไฟล์ต่างๆต่อไปนี้ให้พร้อม.
- ไฟล์รูป แนะนำให้ใช้ jpg สำหรับการทดลองนี้ ให้ตั้งชื่อที่ง่ายๆ เช่น image.jpg และทุกไฟล์ในข้อด้านล่างนี้จะอยู่ในระดับเดียวกันกับไฟล์รูปนี้.
- ไฟล์ test.html สำหรับทดสอบเรียกใช้.
ในโค้ดต่อไปนี้ จะสั่งให้ Google Vision ทำงานแตกตัวอักษรออกจากภาพ และเป็นภาพที่ตัวอักษรไม่แน่นหนา ดังนั้นจึงใช้หลักการเดียวกันกับในบทความสำหรับ PHP ที่เคยเขียนไว้ก่อนหน้านี้ คือ เมธอดคำสั่งจะเป็น images.annotate; HTTP request เป็นเมธอด POST และ URL เป็น https://vision.googleapis.com/v1/images:annotate; ความสามารถจะเป็น TEXT_DETECTION.
โค้ดตัวอย่างสำหรับไฟล์ test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Vision</title>
</head>
<body>
<div id="debug"></div>
<script type="application/javascript">
function getImageContents() {
const imageUrl = './demo.png';
return fetch(imageUrl)
.then((response) => {
return response.blob();
});
}
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
(async () => {
const imageContents = await getImageContents();
const apiKey = 'API key ที่ได้จากขั้นตอนก่อนหน้านี้';
let imgB64 = await getBase64(imageContents);
imgB64 = imgB64.replace(/^data:.+;base64,/, "");
// build request body. -----------------
let requestBody = {
requests: [
{
image: {
content: imgB64
},
features: [{ type: "TEXT_DETECTION" }]
}
]
};
// เรียกไปยัง Google Vision API. ----------
fetch('https://vision.googleapis.com/v1/images:annotate', {
'method': 'post',
'headers': {
'Content-Type': 'application/json',
'X-goog-api-key': apiKey,
},
'body': JSON.stringify(requestBody),
})
.then((response) => {
if (!response.ok) {
return response.text()
.then((data) => {
return Promise.reject(data)
});
}
return response.json();
})
.then((data) => {
console.log(data);
const debug = document.getElementById('debug');
debug.innerHTML = '<pre>' + JSON.stringify(data, {}, 4) + '</pre>';
})
.catch((data) => {
console.error(data);
});
})();
</script>
</body>
</html>จากโค้ดด้านบน ผลลัพธ์จะได้เป็นลักษณะคล้ายดังต่อไปนี้.
{
"responses": [
{
"textAnnotations": [
{
"locale": "th",
"description": "รายการ\nรายการของคุณ\n1\nติดป้ายกำกับ\n-\nต้องการไป\nส่วนตัว\nแผนการเดินทาง\n6 ส่วนตัว\nรายการโปรด\n6 ส่วนตัว\nสถานที่ที่ติดดาว\n6 ส่วนตัว\nเยี่ยมชมแล้ว\nMAPS\n+ รายการใหม่\n:\n...\n:\n...",
"boundingPoly": {
"vertices": [
{
"x": 25
},
{
"x": 383
},
{
"x": 383,
"y": 307
},
{
"x": 25,
"y": 307
}
]
}
},
// ...
]
}
]
}กล่าวคือจะต้องมี property ที่ชื่อ responses อยู่ข้างในเสมอตามเอกสารอ้างอิงของ Google. การใช้งานก็สามารถนำตัวแปร data.responses ไปใช้ต่อได้เลย
