modified capture photo method logic in ocr

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

@@ -340,30 +340,30 @@ function cameraCapture() {
     const snapshot = this.$refs.snapshot;
     snapshot.src = canvas.toDataURL('image/png');
 
-    // ✅ Wait until the SNAPSHOT image loads before cropper!
     snapshot.onload = () => {
         snapshot.classList.remove('hidden');
         video.classList.add('hidden');
 
         this.photoTaken = true;
-        this.stopCamera(); // ✅ Now camera turns off immediately
+        this.stopCamera();
 
-        // ✅ Ensure previous cropper destroyed
-        if (this.cropper) {
-            this.cropper.destroy();
-        }
+        if (this.cropper) this.cropper.destroy();
 
-        // ✅ Start Cropper only after image rendered
+        requestAnimationFrame(() => {
             this.cropper = new Cropper(snapshot, {
                 aspectRatio: NaN,
                 dragMode: 'crop',
                 viewMode: 1,
-            autoCropArea: 1,
-            background: false,
+                autoCropArea: 0.9,
+                background: true,
+                responsive: true,
+                movable: true,
+                zoomable: true,
+            });
+            console.log("✅ Cropper initialized");
         });
     };
-},
-
+}
 
         //
         async uploadCroppedImage() {