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

passed four serial numbers from blade to reosurce page

Browse Source
This commit is contained in:
dhanabalan
2025-10-24 18:25:59 +05:30
parent 6fe4289567
commit 0c00c47aa3
1 changed files with 38 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -288,6 +288,7 @@ document.addEventListener('DOMContentLoaded', () => {
<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="success" @click="uploadCroppedImage" x-show="photoTaken">OK ✔ Upload Cropped</x-filament::button>
<x-filament::button color="success" @click="uploadOcr" x-show="photoTaken">Upload OCR</x-filament::button>
</div>
<input type="hidden" x-ref="hiddenInput" x-model="photo1" name="camera_capture_file">
@@ -340,43 +341,39 @@ function cameraCapture() {
const snapshot = this.$refs.snapshot;
snapshot.src = canvas.toDataURL('image/png');
//Wait until image is loaded
snapshot.onload = () => {
snapshot.classList.remove('hidden');
video.classList.add('hidden');
// ✅ Wait until image is loaded
snapshot.onload = () => {
//Alpine reactive update inside nextTick
this.$nextTick(() => {
this.photoTaken = true;
// ✅ Make snapshot visible for Cropper
snapshot.classList.remove('hidden');
video.classList.add('hidden');
//Destroy old cropper if exists
if (this.cropper) this.cropper.destroy();
// ✅ Alpine reactive update inside nextTick
this.$nextTick(() => {
this.photoTaken = true;
// ✅ Use requestAnimationFrame to ensure browser painted the image
requestAnimationFrame(() => {
this.cropper = new Cropper(snapshot, {
aspectRatio: NaN,
dragMode: 'crop',
viewMode: 1,
autoCropArea: 0.8,
background: true,
movable: true,
zoomable: true,
responsive: true,
});
console.log("✅ Cropper initialized");
});
// ✅ Destroy old cropper if exists
if (this.cropper) this.cropper.destroy();
// ✅ Use requestAnimationFrame to ensure browser painted the image
requestAnimationFrame(() => {
this.cropper = new Cropper(snapshot, {
aspectRatio: NaN,
dragMode: 'crop',
viewMode: 1,
autoCropArea: 0.8,
background: true,
movable: true,
zoomable: true,
responsive: true,
});
console.log("✅ Cropper initialized");
});
this.stopCamera(); // stop camera after Cropper starts
});
};
this.stopCamera(); // stop camera after Cropper starts
});
};
},
//
async uploadCroppedImage() {
@@ -436,9 +433,17 @@ snapshot.onload = () => {
// console.error(data.text);
// }
if (data.success) {
const serials = Array.isArray(data.text) ? data.text.join("\n") : data.text;
alert("OCR Result:\n" + serials);
console.log(serials);
// const serials = Array.isArray(data.text) ? data.text.join("\n") : data.text;
// alert("OCR Result:\n" + serials);
// console.log(serials);
const serials = Array.isArray(data.text) ? data.text : [data.text];
const firstFour = serials.slice(0, 4);
// Emit Livewire event to Resource Page
Livewire.emit('fillSerialNumbers', firstFour);
alert("OCR Result:\n" + firstFour.join("\n"));
console.log("Serials sent to Resource Page:", firstFour);
}
else {
alert("OCR Failed: " + data.error);