daengdeni/lpj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Perbaiki pengaturan canvas dan hapus elemen gambar yang tidak terpakai

Browse Source 
- 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.
This commit is contained in:
Daeng Deni Mardaeni
2024-12-24 10:01:25 +07:00
parent 1dbd45a27d
commit b8f8a3f2bf
2 changed files with 41 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
resources/views/surveyor/components/foto.blade.php
View File

@@ -418,11 +418,6 @@
<div class="input-group w-full flex gap-2">
<input type="hidden" name="name_lantai_unit[]" value="lantai">
<div class="preview-container">
<img id="foto_lantai-preview-{{ $loop->index }}"
src="{{ asset('storage/' . old('foto_lantai_unit', $item['foto_lantai_unit'])) }}"
alt="Foto Lantai" class="mt-2 h-auto"
style="{{ old('foto_lantai_unit', $item['foto_lantai_unit']) ? 'display: block;' : 'display: none;' }} width: 30rem;">
</div>
<input id="inputLantai" type="file" name="foto_lantai_unit[]"
class="file-input file-input-bordered w-full" accept="image/*"

45
resources/views/surveyor/js/camera-editor.blade.php
View File

@@ -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();