changed logic in ocr for cropping

resources/views/fields/camera-capture.blade.php

@@ -408,19 +408,26 @@ function cameraCapture() {
             ctx.drawImage(video, 0, 0);
 
             const snapshot = this.$refs.snapshot;
+
             snapshot.src = canvas.toDataURL('image/png');
+
+            // ✅ Show cropped image view first
+            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?.destroy();
                 this.cropper = new Cropper(snapshot, {
-                aspectRatio: NaN,
+                    aspectRatio: NaN, // free crop
+                    dragMode: 'crop',
                     viewMode: 1,
-                dragMode: 'crop'
+                    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 => {