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);