Closed

Ruyi · Dec 18, 2023

Solved

🤖 · Dec 18, 2023

Here's the modified code with the search bar and all fields/information removed, and a box added for scanned text:

HTML:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>LEO'S OCR</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>
<div class="container-fluid">
  <h2>OCR SAMPLE</h2>
  <div class="col-xs-6">
    <form id="form" action="javascript:void(0)">
      <div class="form-group">
        <input id="file" type="file"/>
      </div>
      <div class="form-group">
        <select class="form-control" id="lang">
          <option value="eng">English</option>
        </select>
      </div>
      <div class="form-group">
        <input class="btn btn-default" type="submit" value="submit"/>
      </div>
    </form>
    <div id="result"></div>
  </div>
  <div class="col-xs-6">
    <div id="progress"></div>
  </div>
</div>

<div class="container">
  <div id="content">
    <div class="table-responsive-xl">
      <table id="myTable" class="table table-hover">
        <tr class="header">
          <th style="width:60%;">Fields</th>
          <th style="width:40%;">Information</th>
        </tr>
      </table>
    </div>
  </div>
</div>

<div id="scannedText"></div>

<button id="cmd">Generate PDF</button>

<script src='https://cdn.rawgit.com/naptha/tesseract.js/0.2.0/dist/tesseract.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js'></script>
<script src='./script.js'></script>

</body>
</html>

And the updated script.js file:

JavaScript:

$("#form").on("submit", e => {
  e.preventDefault();

  const file_list = $("#file").prop("files");
  if (_.isEmpty(file_list)) {
    alert("file Empty");
    return;
  }
  const file = file_list[0];
  if (file.type.indexOf("image") === -1) {
    alert("Image");
    return;
  }

  let status = {};
  Tesseract.recognize(file, { lang: $("#lang").val() }).
  progress(result => {
    let p = result.progress * 100;
    if (!status[result.status]) {
      status[result.status] = true;
      $("#progress").append(`
          <p>${result.status}</p>
          <div class="progress">
            <div class="progress-bar progress-bar${_.size(status)}"></div>
          <div>
        `);
    }
    if (_.isNaN(p)) {
      p = 100;
    }
    $([ICODE].progress-bar${_.size(status)}[/ICODE]).
    css({ width: [ICODE]${p}%[/ICODE] }).
    text(parseFloat(p).toFixed(2));
  }).
  catch(() => {
    $(".progress-bar").addClass("progress-bar-error");
    alert("Empty");
  }).
  then(result => {
    $(".progress-bar").addClass("progress-bar-success");
    $("#result").text(result.text);
    $("#scannedText").text(result.text);
  });

});

var doc = new jsPDF();
var specialElementHandlers = {
  '#editor': function (element, renderer) {
    return true;
  }
};

$('#cmd').click(function () {
  doc.fromHTML($('#content').html(), 15, 15, {
    'width': 170,
    'elementHandlers': specialElementHandlers
  });

  doc.save('sample-file.pdf');
});

Ruyi · Dec 18, 2023

🤖 said:

Here's the modified code with the search bar and all fields/information removed, and a box added for scanned text:

HTML:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>LEO'S OCR</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>
<div class="container-fluid">
  <h2>OCR SAMPLE</h2>
  <div class="col-xs-6">
    <form id="form" action="javascript:void(0)">
      <div class="form-group">
        <input id="file" type="file"/>
      </div>
      <div class="form-group">
        <select class="form-control" id="lang">
          <option value="eng">English</option>
        </select>
      </div>
      <div class="form-group">
        <input class="btn btn-default" type="submit" value="submit"/>
      </div>
    </form>
    <div id="result"></div>
  </div>
  <div class="col-xs-6">
    <div id="progress"></div>
  </div>
</div>

<div class="container">
  <div id="content">
    <div class="table-responsive-xl">
      <table id="myTable" class="table table-hover">
        <tr class="header">
          <th style="width:60%;">Fields</th>
          <th style="width:40%;">Information</th>
        </tr>
      </table>
    </div>
  </div>
</div>

<div id="scannedText"></div>

<button id="cmd">Generate PDF</button>

<script src='https://cdn.rawgit.com/naptha/tesseract.js/0.2.0/dist/tesseract.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js'></script>
<script src='./script.js'></script>

</body>
</html>

And the updated script.js file:

JavaScript:

$("#form").on("submit", e => {
  e.preventDefault();

  const file_list = $("#file").prop("files");
  if (_.isEmpty(file_list)) {
    alert("file Empty");
    return;
  }
  const file = file_list[0];
  if (file.type.indexOf("image") === -1) {
    alert("Image");
    return;
  }

  let status = {};
  Tesseract.recognize(file, { lang: $("#lang").val() }).
  progress(result => {
    let p = result.progress * 100;
    if (!status[result.status]) {
      status[result.status] = true;
      $("#progress").append(`
          <p>${result.status}</p>
          <div class="progress">
            <div class="progress-bar progress-bar${_.size(status)}"></div>
          <div>
        `);
    }
    if (_.isNaN(p)) {
      p = 100;
    }
    $([ICODE].progress-bar${_.size(status)}[/ICODE]).
    css({ width: [ICODE]${p}%[/ICODE] }).
    text(parseFloat(p).toFixed(2));
  }).
  catch(() => {
    $(".progress-bar").addClass("progress-bar-error");
    alert("Empty");
  }).
  then(result => {
    $(".progress-bar").addClass("progress-bar-success");
    $("#result").text(result.text);
    $("#scannedText").text(result.text);
  });

});

var doc = new jsPDF();
var specialElementHandlers = {
  '#editor': function (element, renderer) {
    return true;
  }
};

$('#cmd').click(function () {
  doc.fromHTML($('#content').html(), 15, 15, {
    'width': 170,
    'elementHandlers': specialElementHandlers
  });

  doc.save('sample-file.pdf');
});

Remove the tables and make a box for scanned text

Search

Search

Closed

Ruyi

𝙳𝚞𝚔𝚎 𝚘𝚏 𝙿𝙷𝙲

🤖

Ruyi

𝙳𝚞𝚔𝚎 𝚘𝚏 𝙿𝙷𝙲

Similar threads

About this Thread

New Topics

GBITS ELOAD API Sell E-Load, Game Credits, and Cable Subscriptions Through One Integration

Asking po for coding about sa 𝚁𝚘𝚋𝚕𝚘𝚡

Gpt plus mga idol free

Thoughts on Claude Code mga Sir???

Survey: Best backend for ESP32 IoT projects

Online Mikrotik Voucher Generator no login required saka wala logging

Next.js hosting DMCA ignored?

Sofia + Luhn algorithm for Spotify Trial Python Code Version Valid IMEI 2026

LF may business/offer services/etc. Gawan kita website for Free

Sa mga vibecoders diyan, Ano po gamit niyong subscription rn since mabilis na maubos ang Copilot?

Trending Topics

Online now

Forum statistics