From e1bc838737f0c822600e3f0cc6567f9016fbf334 Mon Sep 17 00:00:00 2001 From: dhanabalan Date: Fri, 24 Oct 2025 17:42:12 +0530 Subject: [PATCH] modified logic in ocr capture photo --- .../views/fields/camera-capture.blade.php | 65 ++++++++++++------- 1 file changed, 40 insertions(+), 25 deletions(-) diff --git a/resources/views/fields/camera-capture.blade.php b/resources/views/fields/camera-capture.blade.php index 0ef9b2a..f64f1bf 100644 --- a/resources/views/fields/camera-capture.blade.php +++ b/resources/views/fields/camera-capture.blade.php @@ -328,35 +328,50 @@ function cameraCapture() { }, - snapshot.onload = () => { - snapshot.classList.remove('hidden'); - video.classList.add('hidden'); + async capturePhoto() { + const video = this.$refs.video; + const canvas = this.$refs.canvas; + const ctx = canvas.getContext('2d'); - this.stopCamera(); + canvas.width = video.videoWidth; + canvas.height = video.videoHeight; + ctx.drawImage(video, 0, 0); - // Destroy old cropper if exists - if (this.cropper) this.cropper.destroy(); + const snapshot = this.$refs.snapshot; + snapshot.src = canvas.toDataURL('image/png'); - // Initialize cropper - requestAnimationFrame(() => { - this.cropper = new Cropper(snapshot, { - aspectRatio: NaN, - dragMode: 'crop', - viewMode: 1, - autoCropArea: 0.9, - background: true, - responsive: true, - movable: true, - zoomable: true, - }); - console.log("✅ Cropper initialized"); + snapshot.onload = () => { + snapshot.classList.remove('hidden'); + video.classList.add('hidden'); + + this.stopCamera(); + + // Destroy old cropper if exists + if (this.cropper) this.cropper.destroy(); + + // Initialize cropper + requestAnimationFrame(() => { + this.cropper = new Cropper(snapshot, { + aspectRatio: NaN, + dragMode: 'crop', + viewMode: 1, + autoCropArea: 0.9, + background: true, + responsive: true, + movable: true, + zoomable: true, + }); + console.log("✅ Cropper initialized"); + + // ✅ Update Alpine reactivity so buttons show + this.$nextTick(() => { + this.photoTaken = true; + }); + }); + }; + + }, - // ✅ Update Alpine reactivity so buttons show - this.$nextTick(() => { - this.photoTaken = true; - }); - }); -}, // async uploadCroppedImage() {