From bb7e5cc12db02f876dc66ba9cee8b39bf7794e8f Mon Sep 17 00:00:00 2001
From: dhanabalan <dhana@example.com>
Date: Fri, 24 Oct 2025 17:09:44 +0530
Subject: [PATCH] changed logic in ocr for cropping

---
 .../views/fields/camera-capture.blade.php     | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/resources/views/fields/camera-capture.blade.php b/resources/views/fields/camera-capture.blade.php
index 5207213..f684e26 100644
--- a/resources/views/fields/camera-capture.blade.php
+++ b/resources/views/fields/camera-capture.blade.php
@@ -398,7 +398,7 @@ function cameraCapture() {
         // },
 
 
-        async capturePhoto() {
+       async capturePhoto() {
             const video = this.$refs.video;
             const canvas = this.$refs.canvas;
             const ctx = canvas.getContext('2d');
@@ -408,19 +408,26 @@ function cameraCapture() {
             ctx.drawImage(video, 0, 0);
 
             const snapshot = this.$refs.snapshot;
+
             snapshot.src = canvas.toDataURL('image/png');
-            snapshot.classList.remove('hidden');
-            video.classList.add('hidden');
 
-            this.photoTaken = true;
-            this.stopCamera();
+            // ✅ Show cropped image view first
+            snapshot.onload = () => {
+                snapshot.classList.remove('hidden');
+                video.classList.add('hidden');
+                this.photoTaken = true;
+                this.stopCamera();
 
-            // ✅ Enable Cropper now
-            this.cropper = new Cropper(snapshot, {
-                aspectRatio: NaN,
-                viewMode: 1,
-                dragMode: 'crop'
-            });
+                // ✅ Now start Cropper (only after image becomes visible)
+                this.cropper?.destroy();
+                this.cropper = new Cropper(snapshot, {
+                    aspectRatio: NaN, // free crop
+                    dragMode: 'crop',
+                    viewMode: 1,
+                    autoCropArea: 0.8,
+                    background: false,
+                });
+            };
         },
 
         //
@@ -431,7 +438,7 @@ function cameraCapture() {
                 return;
             }
 
-            const croppedCanvas = this.cropper.getCroppedCanvas();
+            const croppedCanvas = this.cropper.getCroppedCanvas({ imageSmoothingEnabled: true });
 
             croppedCanvas.toBlob(async blob => {