modified logic in ocr capture photo

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

@@ -328,35 +328,50 @@ function cameraCapture() {
         },
 
 
-    snapshot.onload = () => {
+        async capturePhoto() {
-    snapshot.classList.remove('hidden');
+            const video = this.$refs.video;
-    video.classList.add('hidden');
+            const canvas = this.$refs.canvas;
+            const ctx = canvas.getContext('2d');
 
-    this.stopCamera();
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            ctx.drawImage(video, 0, 0);
 
-    // Destroy old cropper if exists
+            const snapshot = this.$refs.snapshot;
-    if (this.cropper) this.cropper.destroy();
+            snapshot.src = canvas.toDataURL('image/png');
 
-    // Initialize cropper
+          snapshot.onload = () => {
-    requestAnimationFrame(() => {
+                snapshot.classList.remove('hidden');
-        this.cropper = new Cropper(snapshot, {
+                video.classList.add('hidden');
-            aspectRatio: NaN,
+
-            dragMode: 'crop',
+                this.stopCamera();
-            viewMode: 1,
+
-            autoCropArea: 0.9,
+                // Destroy old cropper if exists
-            background: true,
+                if (this.cropper) this.cropper.destroy();
-            responsive: true,
+
-            movable: true,
+                // Initialize cropper
-            zoomable: true,
+                requestAnimationFrame(() => {
-        });
+                    this.cropper = new Cropper(snapshot, {
-        console.log("✅ Cropper initialized");
+                        aspectRatio: NaN,
+                        dragMode: 'crop',
+                        viewMode: 1,
+                        autoCropArea: 0.9,
+                        background: true,
+                        responsive: true,
+                        movable: true,
+                        zoomable: true,
+                    });
+                    console.log("✅ Cropper initialized");
+
+                    // ✅ Update Alpine reactivity so buttons show
+                    this.$nextTick(() => {
+                        this.photoTaken = true;
+                    });
+                });
+            };
+
+        },
 
-        // ✅ Update Alpine reactivity so buttons show
-        this.$nextTick(() => {
-            this.photoTaken = true;
-        });
-    });
-},
 
         //
         async uploadCroppedImage() {