Добавление некоторого HTML к тегу body с добавлением, но функция Tesseract не работает

Question

Я добавил html к тегу body с помощью append.Но когда я поставил runOCR(url) Тессеракт OCR не работает. Как выйти из этой проблемы.

Вот мой код:

    function test(){
var script = document.createElement('script');
     script.src = 
    'https://cdn.rawgit.com/naptha/tesseract.js
     /1.0.10/dist/tesseract.js';
   script.type = 'text/javascript';
   document.getElementsByTagName('head')[0].appendChild(script);


    var large = '<div id="text" class="form-group"> \
     <input type="text" id="url" placeholder="Image URL" />\
     <input type="button" id="go_button" value="Run" />\
     <div id="ocr_status"> </div>\
     <div>\
        <label>Filed1:</label>\
           <textarea id="text1" ></textarea>\
     </div>\
     </div>';
     $('body').append(large);

     $(".form-group").css({
      position: "fixed",
      top: "20px",
      right: "180px",
 'border-radius': '25px',
     'border': '2px solid #73AD21',
 'padding': '20px', 
 'background': '#FFF8DC',
      "font-size": "1.5em",
  "z-index": "1000",

    });
      function runOCR(url) {
     Tesseract.recognize(url)
    .then(function(result) {
       console.log(result);
        document.getElementById("text1").value = result.text;
      }).progress(function(result) {
      document.getElementById("ocr_status").innerText = 
      result["status"] + " (" +
        (result["progress"] * 100) + "%)";
         });      
          }
    document.getElementById("url")
  .addEventListener("input", function(e) {
   var url = document.getElementById("url").value;
    runOCR(url);

     });

Answer 1

Я написал минимальный пример запуска tesseract.js в расширении chrome, вы можете проверить и надеяться, что это поможет:

https://github.com/jeromewu/tesseract.js-chrome-extension

фрагмент кода ниже:

const doOCR = () => {
  const image = document.getElementById('image');
  const result = document.getElementById('result');

  const { TesseractWorker } = Tesseract;
  const worker = new TesseractWorker({
    workerPath: chrome.runtime.getURL('js/worker.min.js'),
    langPath: chrome.runtime.getURL('traineddata'),
    corePath: chrome.runtime.getURL('js/tesseract-core.wasm.js'),
  });

  worker.recognize(image)
    .then(({ text }) => {
      result.innerHTML = `<p>OCR Result:</p><p>${text}</p>`;
    })
}

const startBtn = document.getElementById('start-btn');
startBtn.onclick = doOCR;