OCR - Optical Character Recognition
Crowl.ocr.js
Met deze klas kan je een afbeelding opvragen via de webcam of van je harde schijf. Als de afbeelding tekst bevat, wordt die omgezet in bewerkbare tekst.
/*Voorbeeldgebruik*/
new ImageOCR({
useWebcam: true,
useUpload: true,
useFree: true,
containerId: 'container',
facingMode: 'environment' //standaard: kan schakelen met 'user'
});Parameters
- useWebcam: al dan niet de webcam activeren
- useUpload: al dan niet een uploadveld voorzien
- containerId: id van het HTML-element waarin de OCR-module wordt geladen
- facingMode: staat standaard op environment, maar je kan schakelen naar 'user'
- useFree: indien useFree op "false" staat, wordt de OCR-taak niet uitgevoerd, maar kan je via het 'event' pictureReceived de afbeelding op een andere manier (Bijvoorbeeld via CrowlVision AI) verwerken.
Event listeners
De class heeft drie event listeners.
- ocrStarted: het OCR-proces is begonnen. Hier kan je bijvoorbeeld een loader toevoegen aan de pagina.
- ocrResult: het ontvangen van het resultaat van het OCR-proces .
- pictureReceived: De afbeelding van de camera of opslagmedium is ontvangen. Je kan de image-blob nu ook voor andere doeleinden inzetten. Bijvoobeeld voor echte image recognition-technieken op basis van AI.
document.addEventListener('ocrStarted', (event) => {
if (event.detail.show) {
console.log('OCR begonnen...');
} else {
console.log('OCR klaar.');
}
});
document.addEventListener('ocrResult', (event) => {
console.log('OCR-resultaat:', event.detail.text);
const resultSection = document.getElementById('resultSection');
resultSection.textContent = 'Extracted Text: ' + event.detail.text;
});
document.addEventListener('pictureReceived', (event) => {
console.log('Ontvangen afbeelding: ', event.detail.blob);
});Knoppen aanpassen
Je kan de opschriften van de knoppen en de zichtbaarheid eenvoudig aanpassen.
const imageOCR = new ImageOCR({ useWebcam: true, useUpload: true });
imageOCR.setButtonLabels('Open camera', 'Scan');
imageOCR.toggleButtonVisibility(true, false);