modified logic in ocr

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

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