Skip to content

Instantly share code, notes, and snippets.

@code-boxx

code-boxx/0-JS-OCR.MD

Last active February 6, 2024 09:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save code-boxx/06c042db6e5c6eedb10fc402371f3878 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save code-boxx/06c042db6e5c6eedb10fc402371f3878 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. code-boxx revised this gist Aug 11, 2023. 1 changed file with 3 additions and 4 deletions.
    7 changes: 3 additions & 4 deletions 0-JS-OCR.MD
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,7 @@
    ## JAVASCRIPT IMAGE TO TEXT WITH OCR
    https://code-boxx.com/javascript-ocr-image-to-text/

    ## TESSERACT.JS
    https://github.com/naptha/tesseract.js
    * https://code-boxx.com/javascript-ocr-image-to-text/
    * https://youtu.be/znsqLxIp3Gk
    * https://github.com/naptha/tesseract.js

    ## TEST IMAGE
    ![text](https://user-images.githubusercontent.com/11156244/239129949-3956709c-2073-4730-83cf-eccc6edd35ea.png)
  2. code-boxx revised this gist Aug 11, 2023. 1 changed file with 15 additions and 15 deletions.
    30 changes: 15 additions & 15 deletions 2-fetch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,16 +1,16 @@
    window.addEventListener("load", () => {
    // (A) FETCH IMAGE
    fetch("text.png")
    .then(res => res.blob())
    .then(async (blob) => {
    // (B) CREATE ENGLISH TESSERACT WORKER
    const worker = await Tesseract.createWorker();
    await worker.loadLanguage("eng");
    await worker.initialize("eng");
    window.addEventListener("load", () => {
    // (A) FETCH IMAGE
    fetch("text.png")
    .then(res => res.blob())
    .then(async (blob) => {
    // (B) CREATE ENGLISH TESSERACT WORKER
    const worker = await Tesseract.createWorker();
    await worker.loadLanguage("eng");
    await worker.initialize("eng");

    // (C) RESULT
    const res = await worker.recognize(blob);
    document.getElementById("result").value = res.data.text;
    })
    .catch(err => console.error(err));
    });
    // (C) RESULT
    const res = await worker.recognize(blob);
    document.getElementById("result").value = res.data.text;
    })
    .catch(err => console.error(err));
    });
  3. code-boxx revised this gist Aug 10, 2023. 1 changed file with 8 additions and 0 deletions.
    8 changes: 8 additions & 0 deletions x-dummy.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    /* NOT IMPORTANT - COSMETICS */
    * { font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; }
    body { max-width: 600px; margin: 0 auto; padding: 10px; }
    #select, #result, #vid, #go { width: 100%; padding: 10px; margin: 5px 0; }
    #select { border: 1px solid #ffb6b6; background: #ffe7e7; }
    #result { resize: none; height: 100px; border: 1px solid #c0bfff; background: #dceaff; }
    #vid { height: 400px; }
    #go { color: #fff; background: #5145b5; border: 0; cursor: pointer; }
  4. code-boxx revised this gist Aug 10, 2023. 6 changed files with 66 additions and 73 deletions.
    35 changes: 9 additions & 26 deletions 1-select.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,34 +3,17 @@
    <head>
    <title>Image To Text - Select From File</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="x-dummy.css">

    <!-- (A) LOAD TESSERACT & JS -->
    <!-- https://cdnjs.com/libraries/tesseract.js -->
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/4.1.1/tesseract.min.js"></script>
    <script defer src="1-select.js"></script>
    </head>
    <body>
    <!-- (A) FILE SELECTOR & RESULT -->
    <!-- (B) FILE SELECTOR & RESULT -->
    <input type="file" id="select" accept="image/png, image/gif, image/webp, image/jpeg">
    <div id="result"></div>

    <!-- (B) LOAD TESSERACT -->
    <!-- https://cdnjs.com/libraries/tesseract.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/4.0.6/tesseract.min.js"></script>

    <!-- (C) INIT -->
    <script>
    window.addEventListener("load", async () => {
    // (C1) GET HTML ELEMENTS
    const hSel = document.getElementById("select"),
    hRes = document.getElementById("result");

    // (C2) CREATE ENGLISH WORKER
    const worker = await Tesseract.createWorker();
    await worker.loadLanguage("eng");
    await worker.initialize("eng");

    // (C3) ON FILE SELECT - IMAGE TO TEXT
    hSel.onchange = async () => {
    const res = await worker.recognize(hSel.files[0]);
    hRes.innerHTML = res.data.text;
    };
    });
    </script>
    <textarea id="result"></textarea>
    </body>
    </html>
    16 changes: 16 additions & 0 deletions 1-select.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    window.addEventListener("load", async () => {
    // (A) GET HTML ELEMENTS
    const hSel = document.getElementById("select"),
    hRes = document.getElementById("result");

    // (B) CREATE ENGLISH TESSERACT WORKER
    const worker = await Tesseract.createWorker();
    await worker.loadLanguage("eng");
    await worker.initialize("eng");

    // (C) ON FILE SELECT - IMAGE TO TEXT
    hSel.onchange = async () => {
    const res = await worker.recognize(hSel.files[0]);
    hRes.value = res.data.text;
    };
    });
    34 changes: 9 additions & 25 deletions 2-fetch.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,32 +3,16 @@
    <head>
    <title>Image To Text - Fetch</title>
    <meta charset="utf-8">
    </head>
    <body>
    <!-- (A) RESULT -->
    <div id="result"></div>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="x-dummy.css">

    <!-- (B) LOAD TESSERACT -->
    <!-- (A) LOAD TESSERACT & JS -->
    <!-- https://cdnjs.com/libraries/tesseract.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/4.0.6/tesseract.min.js"></script>

    <!-- (C) FETCH IMAGE & SHOW TEXT -->
    <script>
    window.addEventListener("load", () => {
    // (C1) FETCH IMAGE
    fetch("text.png")
    .then(res => res.blob())
    .then(async (blob) => {
    // (C2) CREATE ENGLISH WORKER
    const worker = await Tesseract.createWorker();
    await worker.loadLanguage("eng");
    await worker.initialize("eng");

    // (C3) RESULT
    const res = await worker.recognize(blob);
    document.getElementById("result").innerHTML = res.data.text;
    });
    });
    </script>
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/4.1.1/tesseract.min.js"></script>
    <script defer src="2-fetch.js"></script>
    </head>
    <body>
    <!-- (B) RESULT -->
    <textarea id="result"></textarea>
    </body>
    </html>
    16 changes: 16 additions & 0 deletions 2-fetch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    window.addEventListener("load", () => {
    // (A) FETCH IMAGE
    fetch("text.png")
    .then(res => res.blob())
    .then(async (blob) => {
    // (B) CREATE ENGLISH TESSERACT WORKER
    const worker = await Tesseract.createWorker();
    await worker.loadLanguage("eng");
    await worker.initialize("eng");

    // (C) RESULT
    const res = await worker.recognize(blob);
    document.getElementById("result").value = res.data.text;
    })
    .catch(err => console.error(err));
    });
    28 changes: 11 additions & 17 deletions 3-cam.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,24 +3,18 @@
    <head>
    <title>Image To Text - Webcam</title>
    <meta charset="utf-8">
    <style>
    * { font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; }
    body { max-width: 600px; margin: 0 auto; }
    video, button, div { width: 100%; }
    video { height: 400px; }
    button, div { padding: 10px; }
    button { color: #fff; background: #5145b5; border: 0; cursor: pointer; }
    </style>
    </head>
    <body>
    <!-- (A) WEBCAM & RESULT -->
    <video id="camVid" autoplay></video>
    <button id="camGo">Go!</button>
    <div id="camRes"></div>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="x-dummy.css">

    <!-- (B) LOAD TESSERACT & JS -->
    <!-- (A) LOAD TESSERACT & JS -->
    <!-- https://cdnjs.com/libraries/tesseract.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/4.0.6/tesseract.min.js"></script>
    <script src="3-cam.js"></script>
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/4.1.1/tesseract.min.js"></script>
    <script defer src="3-cam.js"></script>
    </head>
    <body>
    <!-- (B) WEBCAM & RESULT -->
    <video id="vid" autoplay></video>
    <button id="go">Go!</button>
    <textarea id="result"></textarea>
    </body>
    </html>
    10 changes: 5 additions & 5 deletions 3-cam.js
    View file
    Original file line number Diff line number Diff line change
    @@ -4,14 +4,14 @@ var webkam = {
    hVid : null, hGo :null, hRes : null, // html elements
    init : () => {
    // (A1) GET HTML ELEMENTS
    webkam.hVid = document.getElementById("camVid"),
    webkam.hGo = document.getElementById("camGo"),
    webkam.hRes = document.getElementById("camRes");
    webkam.hVid = document.getElementById("vid"),
    webkam.hGo = document.getElementById("go"),
    webkam.hRes = document.getElementById("result");

    // (A2) GET USER PERMISSION TO ACCESS CAMERA
    navigator.mediaDevices.getUserMedia({ video: true })
    .then(async (stream) => {
    // (A2-1) CREATE ENGLISH WORKER
    // (A2-1) CREATE ENGLISH TESSERACT WORKER
    webkam.worker = await Tesseract.createWorker();
    await webkam.worker.loadLanguage("eng");
    await webkam.worker.initialize("eng");
    @@ -38,7 +38,7 @@ var webkam = {

    // (B3) CANVAS TO IMAGE, IMAGE TO TEXT
    const res = await webkam.worker.recognize(canvas.toDataURL("image/png"));
    webkam.hRes.innerHTML = res.data.text;
    webkam.hRes.value = res.data.text;
    },
    };
    window.addEventListener("load", webkam.init);
  5. code-boxx revised this gist May 26, 2023. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion 0-JS-OCR.MD
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    ## FULL TUTORIAL
    ## JAVASCRIPT IMAGE TO TEXT WITH OCR
    https://code-boxx.com/javascript-ocr-image-to-text/

    ## TESSERACT.JS
  6. code-boxx revised this gist May 18, 2023. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion 0-JS-OCR.MD
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    ## FULL TUTORIAL
    https://code-boxx.com/?p=20038&preview=true
    https://code-boxx.com/javascript-ocr-image-to-text/

    ## TESSERACT.JS
    https://github.com/naptha/tesseract.js
  7. code-boxx created this gist May 18, 2023.
    29 changes: 29 additions & 0 deletions 0-JS-OCR.MD
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    ## FULL TUTORIAL
    https://code-boxx.com/?p=20038&preview=true

    ## TESSERACT.JS
    https://github.com/naptha/tesseract.js

    ## TEST IMAGE
    ![text](https://user-images.githubusercontent.com/11156244/239129949-3956709c-2073-4730-83cf-eccc6edd35ea.png)

    ## LICENSE
    Copyright by Code Boxx

    Permission is hereby granted, free of charge, to any person obtaining a copy
    of this software and associated documentation files (the "Software"), to deal
    in the Software without restriction, including without limitation the rights
    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    copies of the Software, and to permit persons to whom the Software is
    furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all
    copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
    SOFTWARE.
    36 changes: 36 additions & 0 deletions 1-select.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Image To Text - Select From File</title>
    <meta charset="utf-8">
    </head>
    <body>
    <!-- (A) FILE SELECTOR & RESULT -->
    <input type="file" id="select" accept="image/png, image/gif, image/webp, image/jpeg">
    <div id="result"></div>

    <!-- (B) LOAD TESSERACT -->
    <!-- https://cdnjs.com/libraries/tesseract.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/4.0.6/tesseract.min.js"></script>

    <!-- (C) INIT -->
    <script>
    window.addEventListener("load", async () => {
    // (C1) GET HTML ELEMENTS
    const hSel = document.getElementById("select"),
    hRes = document.getElementById("result");

    // (C2) CREATE ENGLISH WORKER
    const worker = await Tesseract.createWorker();
    await worker.loadLanguage("eng");
    await worker.initialize("eng");

    // (C3) ON FILE SELECT - IMAGE TO TEXT
    hSel.onchange = async () => {
    const res = await worker.recognize(hSel.files[0]);
    hRes.innerHTML = res.data.text;
    };
    });
    </script>
    </body>
    </html>
    34 changes: 34 additions & 0 deletions 2-fetch.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Image To Text - Fetch</title>
    <meta charset="utf-8">
    </head>
    <body>
    <!-- (A) RESULT -->
    <div id="result"></div>

    <!-- (B) LOAD TESSERACT -->
    <!-- https://cdnjs.com/libraries/tesseract.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/4.0.6/tesseract.min.js"></script>

    <!-- (C) FETCH IMAGE & SHOW TEXT -->
    <script>
    window.addEventListener("load", () => {
    // (C1) FETCH IMAGE
    fetch("text.png")
    .then(res => res.blob())
    .then(async (blob) => {
    // (C2) CREATE ENGLISH WORKER
    const worker = await Tesseract.createWorker();
    await worker.loadLanguage("eng");
    await worker.initialize("eng");

    // (C3) RESULT
    const res = await worker.recognize(blob);
    document.getElementById("result").innerHTML = res.data.text;
    });
    });
    </script>
    </body>
    </html>
    26 changes: 26 additions & 0 deletions 3-cam.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Image To Text - Webcam</title>
    <meta charset="utf-8">
    <style>
    * { font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; }
    body { max-width: 600px; margin: 0 auto; }
    video, button, div { width: 100%; }
    video { height: 400px; }
    button, div { padding: 10px; }
    button { color: #fff; background: #5145b5; border: 0; cursor: pointer; }
    </style>
    </head>
    <body>
    <!-- (A) WEBCAM & RESULT -->
    <video id="camVid" autoplay></video>
    <button id="camGo">Go!</button>
    <div id="camRes"></div>

    <!-- (B) LOAD TESSERACT & JS -->
    <!-- https://cdnjs.com/libraries/tesseract.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/4.0.6/tesseract.min.js"></script>
    <script src="3-cam.js"></script>
    </body>
    </html>
    44 changes: 44 additions & 0 deletions 3-cam.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    var webkam = {
    // (A) INITIALIZE
    worker : null, // tesseract worker
    hVid : null, hGo :null, hRes : null, // html elements
    init : () => {
    // (A1) GET HTML ELEMENTS
    webkam.hVid = document.getElementById("camVid"),
    webkam.hGo = document.getElementById("camGo"),
    webkam.hRes = document.getElementById("camRes");

    // (A2) GET USER PERMISSION TO ACCESS CAMERA
    navigator.mediaDevices.getUserMedia({ video: true })
    .then(async (stream) => {
    // (A2-1) CREATE ENGLISH WORKER
    webkam.worker = await Tesseract.createWorker();
    await webkam.worker.loadLanguage("eng");
    await webkam.worker.initialize("eng");

    // (A2-2) WEBCAM LIVE STREAM
    webkam.hVid.srcObject = stream;
    webkam.hGo.onclick = webkam.snap;
    })
    .catch(err => console.error(err));
    },

    // (B) SNAP VIDEO FRAME TO TEXT
    snap : async () => {
    // (B1) CREATE NEW CANVAS
    let canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    vWidth = webkam.hVid.videoWidth,
    vHeight = webkam.hVid.videoHeight;

    // (B2) CAPTURE VIDEO FRAME TO CANVAS
    canvas.width = vWidth;
    canvas.height = vHeight;
    ctx.drawImage(webkam.hVid, 0, 0, vWidth, vHeight);

    // (B3) CANVAS TO IMAGE, IMAGE TO TEXT
    const res = await webkam.worker.recognize(canvas.toDataURL("image/png"));
    webkam.hRes.innerHTML = res.data.text;
    },
    };
    window.addEventListener("load", webkam.init);