modified capture photo method logic in ocr

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

@@ -328,7 +328,7 @@ function cameraCapture() {
         },
 
 
-     async capturePhoto() {
+  async capturePhoto() {
     const video = this.$refs.video;
     const canvas = this.$refs.canvas;
     const ctx = canvas.getContext('2d');
@@ -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
-        this.cropper = new Cropper(snapshot, {
-            aspectRatio: NaN,
-            dragMode: 'crop',
-            viewMode: 1,
-            autoCropArea: 1,
-            background: false,
+        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");
         });
     };
-},
-
+}
 
         //
         async uploadCroppedImage() {