Question

我正在尝试通过将网络摄像头与Tesseract.js一起使用来构建id扫描仪。捕获图像，裁剪重要部分并将其发送到ocr功能正在工作。此行代码出现问题：

const { data: { text } } = await worker.recognize('../images/img2test1.jpg');

如果图像位于硬盘上则可以使用，因此您将URL传递给它。

但是我需要网络摄像头的快照。顺便说一句，快照出来好吧。我为此使用画布。

我可以使用File或Image api作为recognize()的参数传递画布图像，但两者均无效。

使用任一方法创建图像都可以通过它，但是没有发生ocr操作。我是否需要一些其他参数，或者是否可以像url这样模拟图像文件以传递给recognize()？我在其自述页面中使用了official example。

编辑1：

我还尝试将let canvasStringData = canvas.toDataURL("jpg");传递给recognize(canvasStringData)。

编辑2：

这是我的js代码：

const video = document.getElementById('video');
video.setAttribute("transform", "rotateY(180deg)");
const canvas = document.getElementById('canvas');
const snap = document.getElementById("snap");
const errorMsgElement = document.querySelector('span#errorMsg');

const constraints = {
    audio: false,
    video: true
};

// Access webcam
async function init(){

    try{
      const stream = await navigator.mediaDevices.getUserMedia(constraints);
      handleSuccess(stream);
    } 
    catch(e){
      errorMsgElement.classList.add("alert", "alert-danger");
      errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`;
    }

}

// Success
function handleSuccess(stream) {
    window.stream = stream;
    video.srcObject = stream;
}

// Load init
init();

// Draw image
let ctx = canvas.getContext('2d');
snap.addEventListener("click", () => {

  ctx.rect(0, 200, 640, 120);
  ctx.clip();
  ctx.drawImage(video, 0, 0, 640, 480, 0, 0, 640, 480);
  document.getElementById("crop2").classList.add("crop", "cropCanv");

  let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  let imageData = new ImageData(imgData.data, canvas.width, canvas.height);
  console.log(imgData);
  let canvasStringData = canvas.toDataURL();
  
  ocrize(canvas);
  
});

const { createWorker } = Tesseract;
const worker = createWorker({
  workerPath: '../node_modules/tesseract.js/dist/worker.min.js',
  langPath: '../lang-data',
  corePath: '../node_modules/tesseract.js-core/tesseract-core.wasm.js',
  logger: m => console.log(m),
});

async function ocrize(img){
  await worker.load();
  await worker.loadLanguage('eng');
  await worker.initialize('eng');

  let data1 = img;
  let data2 = "../images/img2test1.jpg";
  let data3 = "../images/imgtxt.png"
  const { data: { text } } = await worker.recognize(data1);
  console.log(text);
  
  //console.log(data1);

  logic(text);

  await worker.terminate();

};

仅当我将url用于本地存储的文件时，它才有效。如果我通过imgData，则日志为空。

如果我以new ImageData的身分通过，则会发出警告和错误消息：

警告：

Error in pixReadMem: size < 12
Error in pixGetSpp: pix not defined
Error in pixGetDimensions: pix not defined
Error in pixGetColormap: pix not defined
Error in pixCopy: pixs not defined
Error in pixGetDepth: pix not defined
Error in pixGetWpl: pix not defined
Error in pixGetYRes: pix not defined
Error in pixClone: pixs not defined
Please call SetImage before attempting recognition.

错误：

Uncaught Error: abort(21). Build with -s ASSERTIONS=1 for more info.
    at createWorker.js:135
    at Worker.e.onmessage (onMessage.js:3)

和

skripta.js:79 Uncaught (in promise) abort(21). Build with -s ASSERTIONS=1 for more info.

它还会在控制台中显示奇怪的数字（21）和行号，可能是另一个错误：


21 tesseract-core.wasm.js:8

Edit3：

const video = document.getElementById('video');
video.setAttribute("transform", "rotateY(180deg)");

const canvas = document.createElement('canvas');
const snap = document.getElementById("snap");
const errorMsgElement = document.querySelector('span#errorMsg');

const constraints = {
    audio: false,
    video: true
};

// Access webcam
async function init(){

    try{
      const stream = await navigator.mediaDevices.getUserMedia(constraints);
      handleSuccess(stream);
    } 
    catch(e){
      errorMsgElement.classList.add("alert", "alert-danger");
      errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`;
    }

}

// Success
function handleSuccess(stream) {
    window.stream = stream;
    video.srcObject = stream;
}

// Load init
init();

snap.addEventListener("click", () => {
  
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  // Draw image
  let ctx = canvas.getContext('2d');
  ctx.rect(250, 300, 700, 120);
  ctx.clip();
  ctx.drawImage(video, 0, 0, 1280, 720, 0, 0, 1280, 720);
  document.getElementById("crop2").classList.add("crop", "cropCanv");

  let canvasStringData = canvas.toDataURL('image/png');
  let myImg = document.getElementById("myImg");
  myImg.width = video.videoWidth;
  myImg.height = video.videoHeight;
  myImg.src = canvasStringData;
  ocrize(myImg);
  
});

const { createWorker } = Tesseract;
const worker = createWorker({
  workerPath: '../node_modules/tesseract.js/dist/worker.min.js',
  langPath: '../lang-data',
  corePath: '../node_modules/tesseract.js-core/tesseract-core.wasm.js',
  logger: m => console.log(m),
});

async function ocrize(img){
  await worker.load();
  await worker.loadLanguage('srp_latn');
  await worker.initialize('srp_latn');

  const { data: { text } } = await worker.recognize(img);
  console.log(text);

  await worker.terminate();

};

在寻找“ interwebz”解决方案之后，我终于找到了。

此部分：

  let canvasStringData = canvas.toDataURL('image/png');
  let myImg = document.getElementById("myImg");
  myImg.width = video.videoWidth;
  myImg.height = video.videoHeight;
  myImg.src = canvasStringData;

裁剪画布并重新绘制后，获取画布数据并将其设置为图像源，然后将该图像传递到ocrize()。

让TesseractJS接受网络摄像头快照

0 个答案: