LoginSignup
@frswataru (本石 渉)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

tesseract-ocr　Multiple Rectanglesギブアップ

Q&A

Closed

tesseract-ocr

解決したいこと

Multiple Rectangles上手くいきません
小四角上手く読み込めず、、、、ギブです
解決方法を教えて下さい。
image.png

該当するソースコード

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECSS3.0</title>
    <link rel="stylesheet" href="css/stylesheet.css">
    <link href="css/slick.css" rel="stylesheet" type="text/css">
    <link href="css/slick-theme.css" rel="stylesheet" type="text/css">
    <style>
        #container2 {
            overflow: hidden;
        }

        canvas {
            float: left;
        }

        #result-text {
            float: left;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <script src="script.js"></script>
    <div class="header">
        <div class="header-logo" font-weight:bold;>E<span style="font-size:0.3em;font-weight:normal;">lectronic</span>
            C<span style="font-size:0.3em;font-weight:normal;">heck</span>
            S<span style="font-size:0.3em;font-weight:normal;">heet</span>
            S<span style="font-size:0.3em;font-weight:normal;">ystem</span>

        </div>

        <div id="container">
            <div class="circle icon">
                <span class="bar top"></span>
                <span class="bar middle"></span>
                <span class="bar bottom"></span>
            </div>
        </div>

        <div id="containerLogo">
            <a href="index.html"><img src="images/TCD_B.jpg"></a>
        </div>
    </div>

    <!-- <div class="main"> -->
    <nav id="nav">
        <ul>
            <!-- <li><a href="#" onclick="window.close(); return false;">Close</a></li> -->
            <li><a href="index.html">Menu</a></li>
        </ul>
    </nav>

    <div id='container2'>
        <canvas width='500' height='400'></canvas>
        <div id='result-text'></div>
    </div>

    <div class="SDkEP">
        <div id="inputWrapper">
            <div class="inputTextBox" 　>
                <input id="input1" type="search" autocomplete="off" aria-live="polite" placeholder="ED を入力">
            </div>
            <div class="inputTextBox">
                <input id="input2" type="search" autocomplete="off" aria-live="polite" placeholder="DS を入力">
            </div>
        </div>
    </div>

    <!-- チェックシート作成ボタン -->
    <div id="btn" class="btn-wrap" style="text-align:center">
        <a href="" class="btn btn-switch"><span>Create！</span></a>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/2.1.4/tesseract.min.js'></script>
    <script>
        // canvas(video)&text(result-text)宣言
        const canvas = document.querySelector('canvas');
        const context = canvas.getContext('2d');

        const image = document.createElement('video');

        // const resultText = document.getElementById('result-text');
        const input1 = document.getElementById('input1');
        const input2 = document.getElementById('input2');
        let textBlocks = [];

        // videoのサイズ変更
        image.videoWidth = canvas.width;
        image.videoHeight = canvas.height;

        navigator.mediaDevices.getUserMedia({
            video: {
                facingMode: { ideal: 'environment' },
            }
        })
            .then(stream => {
                image.srcObject = stream;
                image.play();

                videoDisplay();

                setTimeout(analysis);
            });


        // 赤枠の発火条件_Textデータの個数が0以上
        const videoDisplay = () => {
            context.drawImage(image, 0, 0, canvas.width, canvas.height);
            context.strokeStyle = "rgb(255, 0, 0) ";
            context.lineWidth = 3;
            // Path描画（閉じたオブジェクト）_ED
            context.beginPath(100, 175);
            context.lineTo(300, 175);
            context.lineTo(300, 250);
            context.lineTo(100, 250);
            context.lineTo(100, 175);
            context.closePath();
            context.stroke();
            // Path描画（閉じたオブジェクト）_DS
            context.beginPath(305, 175);
            context.lineTo(390, 175);
            context.lineTo(390, 225);
            context.lineTo(305, 225);
            context.lineTo(305, 175);
            context.closePath();
            context.stroke();





            // 青枠の発火条件_Textデータの個数が1以上
            context.strokeStyle = "rgb(0, 0, 255) ";
            textBlocks.forEach((block) => {
                context.beginPath(block.bbox.x0, block.bbox.y0);
                context.lineTo(block.bbox.x1, block.bbox.y0);
                context.lineTo(block.bbox.x1, block.bbox.y1);
                context.lineTo(block.bbox.x0, block.bbox.y1);
                context.lineTo(block.bbox.x0, block.bbox.y0);
                context.closePath();
                context.stroke();
            });

            // textBlocks
            console.log(textBlocks)

            requestAnimationFrame(videoDisplay);
        };

        // 発火条件
        // async, awaitは非同期処理が終わるまで先に進まずに待つ
        const analysis = () => {
            (async () => {
                // 文字を解析するための前準備
                const worker = Tesseract.createWorker();
                await worker.load();
                await worker.loadLanguage('eng');
                await worker.initialize('eng');
                // recognizeで画像から文字を検出する
                // { data: { text, blocks } }は分割代入でググって
                const { data: { text, blocks } } = await worker.recognize(canvas.toDataURL(), {
                    // videoDisplayで文字を認識した範囲を表示したいからグローバルな変数に代入
                    rectangle: {
                        left: 100, top: 175, width: 200, height: 75
                    },

                });


                // textBlocks = blocks;
                // Tesseract.createWorkerで作ったworkerを終了させる
                await worker.terminate();

                // recognizeで検出した文字を改行コードで区切ってをHTML上に表示させる
                // resultText.innerHTML = text.replace(/\r?\n/g, '<br>');
                // 1.0秒後にanalysisメソッドを実行する
                setTimeout(analysis, 1000);
                input1.value = text
                input2.value = text
            })();
        };


        var btn = document.getElementById('btn');
        btn.addEventListener('click', function () {
            // "/n"は改行
            var result = window.confirm('ED:' + input1.value + '\n上記の内容でチェックシートを作成しますか？');
            if (result) {
                alert('OKがクリックされました');
            }
            else {
                alert('キャンセルがクリックされました');
            }
        })

        $("#container").click(function () {
            $(".icon").toggleClass("close");
        })
    </script>

</html>

body {
    font-family: "Avenir Next";
    color: #202124;
}

/* header */
.header{
    background-color:#26d0c9;
    color:#fff;
    padding: 20px 40px;
    position: relative;
}

.header-logo{
    /* float:left; */
    font-size:46px;
    /* padding:20px 40px; */
    text-align: center;
    font-weight:bold;

}

.copy-container span{
    color:#ff4a4a;
}

#container {
    background: tomato;
    display: inline-block;
    border-radius: 500px;
    margin: 10px;
    position: absolute;
    top: 10px;
    right: 0;
    padding: 18px;
    cursor: pointer;

}

#containerLogo {
    display: inline-block;
    border-radius: 500px;
    margin: 10px;
    position: fixed;
    top: 0;
    left: 0;
    cursor: pointer;

}

.circle {
    position: relative;
    width: 24px;
    height: 24px;
}

.bar {
    position: absolute;
    height: 3px;
    width: 100%;
    background: white;
    border-radius: 4px;
    transition: ease 0.3s;
}

.top {
    top: 18%;
}

.middle {
    top: 48%;
}

.bottom {
    top: 78%;
}

.close .top {
  transform: rotate(45deg);
  top: 48%;
}

.close .middle{
  opacity: 0;
}

.close .bottom {
  transform: rotate(-45deg);
  top: 48%;
}

/* nav */
nav {
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    height: 0;
    /* float:left; */
}

nav.active{
    opacity: 1;
    visibility: visible;
    float:right;
}

ul {
    display: flex;
    justify-content: center;
}


li{
 list-style:none;
 padding: 8px;
 }
 /* main */

.main{
    padding:25px 40px;
}

/* contents */

.contents{
    display: flex;
    justify-content: center;
}

#container2{
    display: flex;
    justify-content: center;
}

.contents-item{
    /* width: 125px; */
    height: auto;
    float:left;
    margin: 50px 50px 0px 50px;
    text-align: center;
}

.contents-item img{
    width:100%;
  }

  .contents-item p{
    font-size:46px;
    margin: 0px;

}

/* SDkEP */

.SDkEP {
    display: flex;
    align-items: center;
    flex-direction: column;
  }

.contents-item:nth-of-type(2) {
    margin-left: 50px;
  }



.contents-item:nth-of-type(2) {
    margin-left: 50px;
  }



/* .contents-item_Camera{
    /* width: 125px; */
    /* height: auto;
    float:left;
    margin: 50px 50px 50px 288px;
    text-align: center;
} */

/* .contents-item_Create{
    width: 125px;
    height: auto;
    float:left;
    margin: 50px 50px;
    text-align: center;
}  */






.contents-item_Camera p{
    font-size:46px;
    margin: 0px;

}

.contents-item_Create p{
    font-size:46px;
    margin: 0px;

}

.inputTextBox {
    border: 1px solid #000;
    border-radius: 50px;
    padding: 8px 40px;
    width: 300px;
  }

  .inputTextBox:nth-of-type(2) {
    margin-top: 16px;
  }


input {
    background-color: var(--search-box-bg, white);
    border: none;
    border-radius: calc(0.5 * var(--ntp-realbox-height));
    color: var(--search-box-text);
    font-size: 16px;
    height: 100%;
    /* outline: none; */
    padding-inline-end: 40px;
    padding-inline-start: 52px;
    position: relative;
    width: 100%;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

/*背景*/
.btn-wrap {
  margin: 20px;
}

a.btn-switch {
  color: #333;
  border: 1px solid #ddd;
  border-radius: 100vh;
  background: #fbfbfc;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#fbfbfc),
    to(#dcddde)
  );
  background: -webkit-linear-gradient(top, #fbfbfc 0%, #dcddde 100%);
  background: linear-gradient(180deg, #fbfbfc 0%, #dcddde 100%);
  -webkit-box-shadow: -1px -5px 6px rgba(0, 0, 0, 0.2), 3px 3px 5px white,
    0 10px 10px rgba(0, 0, 0, 0.1), inset 0 -4px 5px rgba(0, 0, 0, 0.1);
  box-shadow: -1px -5px 6px rgba(0, 0, 0, 0.2), 3px 3px 5px white,
    0 10px 10px rgba(0, 0, 0, 0.1), inset 0 -4px 5px rgba(0, 0, 0, 0.1);
}

a.btn-switch span {
  display: inline-block;

  -webkit-transition: all 0.3s;

  transition: all 0.3s;
}

a.btn-switch:hover {
  -webkit-box-shadow: -1px -5px 6px rgba(0, 0, 0, 0.2), 3px 3px 5px white,
    0 10px 10px rgba(0, 0, 0, 0.1), inset 0 -4px 5px rgba(0, 0, 0, 0.1),
    inset 0 3px 3px rgba(0, 0, 0, 0.18);
  box-shadow: -1px -5px 6px rgba(0, 0, 0, 0.2), 3px 3px 5px white,
    0 10px 10px rgba(0, 0, 0, 0.1), inset 0 -4px 5px rgba(0, 0, 0, 0.1),
    inset 0 3px 3px rgba(0, 0, 0, 0.18);
}

a.btn-switch:hover span {
  -webkit-transform: scale(0.96);
  transform: scale(0.96);
}
0 likes

4Answer

Comments

  1. @mogamoga1337

    リンク先のanalysisメソッドがほぼ答えでしょう…

  2. @mogamoga1337

    一行一行何をしているのかきちんと理解してください。
    コピペしたら関係ないコメントは消してください。
    text2、rectangle2は不正では？
    本当にリンク先見た？
frswataru
@frswataru

チンプンカンプンですｗｗ
下記の通りコードを追加してみました


const analysis2 = () => {
            (async () => {
                // 文字を解析するための前準備
                const worker2 = Tesseract.createWorker();
                await worker2.load();
                await worker2.loadLanguage('eng');
                await worker2.initialize('eng');
                // recognizeで画像から文字を検出する
                // { data: { text, blocks } }は分割代入でググって
                const { data: { text2, blocks } } = await worker2.recognize(canvas2.toDataURL(), {
                    // videoDisplayで文字を認識した範囲を表示したいからグローバルな変数に代入
                    rectangle2: {
                        left: 305, top: 175, width: 85, height: 50
                    },

                });


                // textBlocks = blocks;
                // Tesseract.createWorkerで作ったworkerを終了させる
                await worker2.terminate();

                // recognizeで検出した文字を改行コードで区切ってをHTML上に表示させる
                // resultText.innerHTML = text.replace(/\r?\n/g, '<br>');
                // 1.0秒後にanalysisメソッドを実行する
                setTimeout(analysis2, 1000);
                input2.value = text2
            })();
        };
0Like
frswataru
@frswataru

心折れそうです

何方か解説付きでご教授願いますm(__)m
どうか初学者にもプログラムのワクワクと感動を教えてください

0Like
frswataru
@frswataru

moga師匠！！何とか形には成りましたm(__)m
頭から煙がでました(;・∀・)
改良点ありましたらご教授のほどお願いします

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECSS3.0</title>
    <link rel="stylesheet" href="css/stylesheet.css">
    <link href="css/slick.css" rel="stylesheet" type="text/css">
    <link href="css/slick-theme.css" rel="stylesheet" type="text/css">
    <style>
        #container2 {
            overflow: hidden;
        }

        canvas {
            float: left;
        }
    </style>
</head>

<body>
    <script src="script.js"></script>
    <div class="header">
        <div class="header-logo" font-weight:bold;>E<span style="font-size:0.3em;font-weight:normal;">lectronic</span>
            C<span style="font-size:0.3em;font-weight:normal;">heck</span>
            S<span style="font-size:0.3em;font-weight:normal;">heet</span>
            S<span style="font-size:0.3em;font-weight:normal;">ystem</span>

        </div>

        <div id="container">
            <div class="circle icon">
                <span class="bar top"></span>
                <span class="bar middle"></span>
                <span class="bar bottom"></span>
            </div>
        </div>

        <div id="containerLogo">
            <a href="index.html"><img src="images/TCD_B.jpg"></a>
        </div>
    </div>


    <nav id="nav">
        <ul>
            <li><a href="index.html">Menu</a></li>
        </ul>
    </nav>

    <div id='container2'>
        <canvas width='500' height='400'></canvas>
    </div>

    <div class="SDkEP">
        <div id="inputWrapper">
            <div class="inputTextBox" 　>
                <input id="input1" type="search" autocomplete="off" aria-live="polite" placeholder="ED を入力">
            </div>
            <div class="inputTextBox">
                <input id="input2" type="search" autocomplete="off" aria-live="polite" placeholder="DS を入力">
            </div>
        </div>
    </div>

    <!-- チェックシート作成ボタン -->
    <div id="btn" class="btn-wrap" style="text-align:center">
        <a href="" class="btn btn-switch"><span>Create！</span></a>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/2.1.4/tesseract.min.js'></script>
    <script>
        const canvas = document.querySelector('canvas');
        const image = document.createElement('video');
        const context = canvas.getContext('2d');
        const input1 = document.getElementById('input1');
        const input2 = document.getElementById('input2');

        const rectangles = [
            {
                left: 100,
                top: 175,
                width: 200,
                height: 75,
            },
            {
                left: 305,
                top: 175,
                width: 85,
                height: 50,
            },
        ];
        let textBlocks = [];

        image.videoWidth = canvas.width;
        image.videoHeight = canvas.height;

        navigator.mediaDevices.getUserMedia({
            video: {
                facingMode: { ideal: 'environment' },
            }
        })
            .then(stream => {
                image.srcObject = stream;
                image.play();

                videoDisplay();

                setTimeout(analysis);
            });


        // 赤枠の発火条件_Textデータの個数が0以上
        const videoDisplay = () => {
            context.drawImage(image, 0, 0, canvas.width, canvas.height);
            context.strokeStyle = "rgb(255, 0, 0) ";
            context.lineWidth = 3;
            // Path描画（閉じたオブジェクト）_ED
            context.beginPath(100, 175);
            context.lineTo(300, 175);
            context.lineTo(300, 250);
            context.lineTo(100, 250);
            context.lineTo(100, 175);
            context.closePath();
            context.stroke();
            // Path描画（閉じたオブジェクト）_DS
            context.beginPath(305, 175);
            context.lineTo(390, 175);
            context.lineTo(390, 225);
            context.lineTo(305, 225);
            context.lineTo(305, 175);
            context.closePath();
            context.stroke();

            requestAnimationFrame(videoDisplay);
        };


        const analysis = () => {
            const scheduler = Tesseract.createScheduler();
            const worker = Tesseract.createWorker();
            const worker2 = Tesseract.createWorker();

            (async () => {
                await worker.load();
                await worker2.load();
                await worker.loadLanguage('eng');
                await worker2.loadLanguage('eng');
                await worker.initialize('eng');
                await worker2.initialize('eng');
                scheduler.addWorker(worker);
                scheduler.addWorker(worker2);
                const results = await Promise.all(rectangles.map((rectangle) => (
                    scheduler.addJob('recognize', canvas.toDataURL(), { rectangle })
                )));
               
                await scheduler.terminate();
                input1.value = results[0].data.text
                input2.value = results[1].data.text
                setTimeout(analysis, 1000);
            })();
        };


        var btn = document.getElementById('btn');
        btn.addEventListener('click', function () {
            // "/n"は改行
            var result = window.confirm('ED:' + input1.value + '\nDS:' + input2.value + '\n上記の内容でチェックシートを作成しますか？');
            if (result) {
                alert('チェックシートが作成されました');
            }
            else {
                alert('キャンセルがクリックされました');
            }
        })

        $("#container").click(function () {
            $(".icon").toggleClass("close");
        })
    </script>

</html>
0Like

Your answer might help someone💌

LoginSign Up