changed logic in ocr for cropping

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;
+            // ✅ Show cropped image view first
-            this.stopCamera();
+            snapshot.onload = () => {
+                snapshot.classList.remove('hidden');
+                video.classList.add('hidden');
+                this.photoTaken = true;
+                this.stopCamera();
 
-            // ✅ Enable Cropper now
+                // ✅ Now start Cropper (only after image becomes visible)
-            this.cropper = new Cropper(snapshot, {
+                this.cropper?.destroy();
-                aspectRatio: NaN,
+                this.cropper = new Cropper(snapshot, {
-                viewMode: 1,
+                    aspectRatio: NaN, // free crop
-                dragMode: '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 => {