Perbaiki pengaturan canvas dan hapus elemen gambar yang tidak terpakai

- Modifikasi ukuran canvas agar sesuai dengan rasio video (portrait/landscape).
- Tambahkan logika untuk menampilkan kontrol editor dan menyembunyikan kontrol kamera.
- Sesuaikan ulang ukuran canvas menggambar agar sinkron dengan ukuran canvas utama.
- Hapus elemen gambar pratinjau yang tidak lagi digunakan di komponen foto.

resources/views/surveyor/js/camera-editor.blade.php

@@ -133,7 +133,7 @@
 
 
 
-            
+
         });
     </script>
 
@@ -204,9 +204,9 @@
             setupCanvas() {
                 // Set initial canvas size
                 this.canvas.width = 1280;
-                this.canvas.height = 960;
-                this.drawingCanvas.width = 1280;
-                this.drawingCanvas.height = 960;
+                this.canvas.height = (this.canvas.width * 3) / 4;
+                this.drawingCanvas.width = this.canvas.width;
+                this.drawingCanvas.height = this.canvas.height;
             }
 
             setupDrawingContext() {
@@ -277,6 +277,43 @@
                 this.saveDrawingState();
             }
 
+            takePhoto() {
+                const context = this.canvas.getContext('2d');
+
+                // Determine if the video is in portrait or landscape mode
+                const isPortrait = this.video.videoHeight > this.video.videoWidth;
+
+                if (isPortrait) {
+                    // Portrait mode
+                    this.canvas.width = this.video.videoWidth;
+                    this.canvas.height = this.video.videoHeight;
+                    context.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);
+                } else {
+                    // Landscape mode
+                    this.canvas.width = 1280;
+                    this.canvas.height = (this.canvas.width * this.video.videoHeight) / this.video.videoWidth;
+                    context.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);
+                }
+
+                // Adjust drawing canvas to match main canvas
+                this.drawingCanvas.width = this.canvas.width;
+                this.drawingCanvas.height = this.canvas.height;
+
+                // Hide video, show canvases
+                this.video.style.display = 'none';
+                this.canvas.style.display = 'block';
+                this.drawingCanvas.style.display = 'block';
+
+                // Show editor controls, hide camera controls
+                document.getElementById('editorControls').classList.remove('hidden');
+                document.getElementById('cameraControls').classList.add('hidden');
+
+                // Clear drawing history
+                this.drawingHistory = [];
+                this.historyIndex = -1;
+                this.saveDrawingState();
+            }
+
             switchCamera() {
                 this.currentFacingMode = this.currentFacingMode === 'environment' ? 'user' : 'environment';
                 this.startCamera();