poc/pds
1
0
Fork 1
Code Issues Pull Requests 8 Actions Packages Projects Releases Wiki Activity

Added file uploaded button in ocr screen

Browse Source
This commit is contained in:
dhanabalan
2025-10-24 17:06:17 +05:30
parent 2062af55a1
commit d2b68c8c63
1 changed files with 100 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
resources/views/fields/camera-capture.blade.php
View File

@@ -283,6 +283,7 @@ document.addEventListener('DOMContentLoaded', () => {
<x-filament::button color="primary" @click="retakePhoto" x-show="photoTaken">Retake</x-filament::button> <x-filament::button color="primary" @click="retakePhoto" x-show="photoTaken">Retake</x-filament::button>
<x-filament::button color="primary" @click="switchCamera" x-show="!photoTaken" class="inline-flex w-auto">Switch Camera</x-filament::button> <x-filament::button color="primary" @click="switchCamera" x-show="!photoTaken" class="inline-flex w-auto">Switch Camera</x-filament::button>
<x-filament::button color="primary" @click="verify" x-show="photoTaken" class="inline-flex w-auto">Verify</x-filament::button> <x-filament::button color="primary" @click="verify" x-show="photoTaken" class="inline-flex w-auto">Verify</x-filament::button>
<x-filament::button color="success" @click="uploadCroppedImage" x-show="photoTaken">OK ✔ Upload Cropped</x-filament::button>
</div> </div>
<input type="hidden" x-ref="hiddenInput" x-model="photo1" name="camera_capture_file"> <input type="hidden" x-ref="hiddenInput" x-model="photo1" name="camera_capture_file">
@@ -322,55 +323,55 @@ function cameraCapture() {
await this.initCamera(); await this.initCamera();
}, },
async capturePhoto() { // async capturePhoto() {
const video = this.$refs.video; // const video = this.$refs.video;
const canvas = this.$refs.canvas; // const canvas = this.$refs.canvas;
const context = canvas.getContext('2d'); // const context = canvas.getContext('2d');
canvas.width = video.videoWidth; // canvas.width = video.videoWidth;
canvas.height = video.videoHeight; // canvas.height = video.videoHeight;
context.drawImage(video, 0, 0, canvas.width, canvas.height); // context.drawImage(video, 0, 0, canvas.width, canvas.height);
// Show snapshot // // Show snapshot
const snapshot = this.$refs.snapshot; // const snapshot = this.$refs.snapshot;
snapshot.src = canvas.toDataURL('image/png'); // snapshot.src = canvas.toDataURL('image/png');
snapshot.classList.remove('hidden'); // snapshot.classList.remove('hidden');
video.classList.add('hidden'); // video.classList.add('hidden');
// Convert canvas to file // // Convert canvas to file
canvas.toBlob(async blob => { // canvas.toBlob(async blob => {
const file = new File([blob], 'capture.png', { type: 'image/png' }); // const file = new File([blob], 'capture.png', { type: 'image/png' });
console.log("File ready for upload:", file); // console.log("File ready for upload:", file);
// Upload to temp folder // // Upload to temp folder
const formData = new FormData(); // const formData = new FormData();
formData.append('photo', file); // formData.append('photo', file);
const response = await fetch('/temp-upload', { // const response = await fetch('/temp-upload', {
method: 'POST', // method: 'POST',
headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }, // headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
body: formData // body: formData
}); // });
const data = await response.json(); // const data = await response.json();
if (data.success) { // if (data.success) {
this.$refs.hiddenInput.value = data.path; // Filament form hidden input // this.$refs.hiddenInput.value = data.path; // Filament form hidden input
console.log("Saved to temp:", data.path); // console.log("Saved to temp:", data.path);
} else { // } else {
alert('Failed to save image.'); // alert('Failed to save image.');
} // }
}, 'image/png', 1.0); // 1.0 = highest quality // }, 'image/png', 1.0); // 1.0 = highest quality
this.photoTaken = true; // this.photoTaken = true;
// Create cropper on image // // Create cropper on image
this.cropper = new Cropper(snapshot, { // // this.cropper = new Cropper(snapshot, {
aspectRatio: NaN, // User free crop area // // aspectRatio: NaN, // User free crop area
viewMode: 1 // // viewMode: 1
}); // // });
if (this.stream) this.stream.getTracks().forEach(track => track.stop()); // if (this.stream) this.stream.getTracks().forEach(track => track.stop());
}, // },
// async verifyOCR(dataUrl) { // async verifyOCR(dataUrl) {
@@ -396,6 +397,64 @@ function cameraCapture() {
// await this.verifyOCR(dataUrl); // await this.verifyOCR(dataUrl);
// }, // },
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.classList.remove('hidden');
video.classList.add('hidden');
this.photoTaken = true;
this.stopCamera();
// ✅ Enable Cropper now
this.cropper = new Cropper(snapshot, {
aspectRatio: NaN,
viewMode: 1,
dragMode: 'crop'
});
},
//
async uploadCroppedImage() {
if (!this.cropper) {
alert("Crop the image before upload!");
return;
}
const croppedCanvas = this.cropper.getCroppedCanvas();
croppedCanvas.toBlob(async blob => {
const formData = new FormData();
formData.append('photo', blob, 'cropped.png');
const response = await fetch('/temp-upload', {
method: 'POST',
headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
body: formData
});
const data = await response.json();
if (data.success) {
this.$refs.hiddenInput.value = data.path;
alert("✅ Cropped image uploaded!");
} else {
alert("Upload failed!");
}
}, "image/png");
},
async verify() { async verify() {
const filePath = this.$refs.hiddenInput.value; // e.g., "temp/capture_1760764396.jpeg" const filePath = this.$refs.hiddenInput.value; // e.g., "temp/capture_1760764396.jpeg"
@@ -441,6 +500,7 @@ function cameraCapture() {
this.photoTaken = false; this.photoTaken = false;
this.$refs.snapshot.classList.add('hidden'); this.$refs.snapshot.classList.add('hidden');
this.$refs.video.classList.remove('hidden'); this.$refs.video.classList.remove('hidden');
this.cropper?.destroy();
await this.initCamera(); await this.initCamera();
} }
} }