added logic in ocr for cropping

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

@@ -340,35 +340,39 @@ function cameraCapture() {
             const snapshot = this.$refs.snapshot;
             snapshot.src = canvas.toDataURL('image/png');
 
-          snapshot.onload = () => {
+
+// ✅ Wait until image is loaded
+snapshot.onload = () => {
+
+    // ✅ Make snapshot visible for Cropper
     snapshot.classList.remove('hidden');
     video.classList.add('hidden');
 
-                this.stopCamera();
+    // ✅ Alpine reactive update inside nextTick
+    this.$nextTick(() => {
+        this.photoTaken = true;
 
-                // Destroy old cropper if exists
+        // ✅ Destroy old cropper if exists
         if (this.cropper) this.cropper.destroy();
 
-                // Initialize cropper
+        // ✅ Use requestAnimationFrame to ensure browser painted the image
         requestAnimationFrame(() => {
             this.cropper = new Cropper(snapshot, {
                 aspectRatio: NaN,
                 dragMode: 'crop',
                 viewMode: 1,
-                        autoCropArea: 0.9,
+                autoCropArea: 0.8,
                 background: true,
-                        responsive: true,
                 movable: true,
                 zoomable: true,
+                responsive: true,
             });
             console.log("✅ Cropper initialized");
+        });
 
-                    // ✅ Update Alpine reactivity so buttons show
+        this.stopCamera(); // stop camera after Cropper starts
-                    this.$nextTick(() => {
-                        this.photoTaken = true;
     });
-                });
+};
-            };
 
         },