diff --git a/resources/views/surveyor/components/foto.blade.php b/resources/views/surveyor/components/foto.blade.php index ce56427..98f2c5a 100644 --- a/resources/views/surveyor/components/foto.blade.php +++ b/resources/views/surveyor/components/foto.blade.php @@ -418,11 +418,6 @@
- Foto Lantai -
@@ -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();