问题描述
我正在尝试通过将网络摄像头与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,480,480);
document.getElementById("crop2").classList.add("crop","cropCanv");
let imgData = ctx.getimageData(0,canvas.width,canvas.height);
let imageData = new ImageData(imgData.data,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,"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,1280,720,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',});
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()
。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)