การเรียกใช้ Google Vision (OCR) โดยไม่ต้องพึ่ง npm สำหรับ JavaScript

ในบทความก่อนหน้านี้ได้แนะนำเกี่ยวกับ การเรียกใช้ 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.

เตรียมพร้อมไฟล์

จากนี้จะเป็นการสร้างโค้ดตัวอย่างขึ้นมาทดลองการทำงาน ดังนั้นผู้อ่านจะต้องเตรียมไฟล์ต่างๆต่อไปนี้ให้พร้อม.

  1. ไฟล์รูป แนะนำให้ใช้ jpg สำหรับการทดลองนี้ ให้ตั้งชื่อที่ง่ายๆ เช่น image.jpg และทุกไฟล์ในข้อด้านล่างนี้จะอยู่ในระดับเดียวกันกับไฟล์รูปนี้.
  2. ไฟล์ 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 ไปใช้ต่อได้เลย

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *

คุณอาจใช้แท็กHTMLและแอททริบิวต์เหล่านี้: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>