poc/pds
1
0
Fork 1
Code Issues Pull Requests 8 Actions Packages Projects Releases Wiki Activity

added ocr logic in canvas

Browse Source
This commit is contained in:
dhanabalan
2025-10-25 08:55:13 +05:30
parent 48ecd57782
commit 0aefc5d4ba
1 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
resources/views/fields/camera-capture.blade.php
View File

@@ -274,6 +274,13 @@ document.addEventListener('DOMContentLoaded', () => {
class="border rounded w-80 h-auto" class="border rounded w-80 h-auto"
></video> ></video>
<!-- OCR Highlight Layer -->
<canvas
x-ref="overlay"
class="border rounded w-80 h-auto"
style="position:absolute; top:0; left:0; pointer-events:none;"
></canvas>
<canvas x-ref="canvas" class="hidden"></canvas> <canvas x-ref="canvas" class="hidden"></canvas>
{{-- <img x-ref="snapshot" class="hidden border rounded max-w-full"> --}} {{-- <img x-ref="snapshot" class="hidden border rounded max-w-full"> --}}
@@ -506,28 +513,34 @@ function cameraCapture() {
const overlay = this.$refs.overlay; const overlay = this.$refs.overlay;
const ctx = overlay.getContext("2d"); const ctx = overlay.getContext("2d");
// Temp image from video if (!video.videoWidth) return;
const tempCanvas = document.createElement("canvas"); const tempCanvas = document.createElement("canvas");
tempCanvas.width = video.videoWidth; tempCanvas.width = video.videoWidth;
tempCanvas.height = video.videoHeight; tempCanvas.height = video.videoHeight;
const tempCtx = tempCanvas.getContext("2d"); const tempCtx = tempCanvas.getContext("2d");
tempCtx.drawImage(video, 0, 0); tempCtx.drawImage(video, 0, 0);
const { data: { words } } = await Tesseract.recognize( const result = await Tesseract.recognize(
tempCanvas.toDataURL(), tempCanvas.toDataURL(),
"eng" "eng",
{
logger: m => console.log(m),
tessedit_char_whitelist: "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"
}
); );
const words = result.data.words;
ctx.clearRect(0, 0, overlay.width, overlay.height); ctx.clearRect(0, 0, overlay.width, overlay.height);
ctx.strokeStyle = "lime"; ctx.strokeStyle = "lime";
ctx.lineWidth = 3; ctx.lineWidth = 3;
words.forEach(word => { words.forEach(w => {
if (word.bbox) { if (!w.bbox || w.confidence < 70) return; // ✅ Ignore low confidence
const { x0, y0, x1, y1 } = word.bbox;
ctx.strokeRect(x0, y0, x1 - x0, y1 - y0); const { x0, y0, x1, y1 } = w.bbox;
} ctx.strokeRect(x0, y0, x1 - x0, y1 - y0);
}); });
}, },
// startDetection() { // startDetection() {
@@ -537,7 +550,7 @@ function cameraCapture() {
if (this.textDetectionInterval) { if (this.textDetectionInterval) {
clearInterval(this.textDetectionInterval); clearInterval(this.textDetectionInterval);
} }
this.textDetectionInterval = setInterval(() => this.detectText(), 500); this.textDetectionInterval = setInterval(() => this.detectText(), 1000);
}, },
// Initialize camera and detection // Initialize camera and detection