passed four serial numbers from blade to reosurce page
This commit is contained in:
@@ -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="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>
|
<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>
|
</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">
|
||||||
@@ -340,19 +341,16 @@ function cameraCapture() {
|
|||||||
const snapshot = this.$refs.snapshot;
|
const snapshot = this.$refs.snapshot;
|
||||||
snapshot.src = canvas.toDataURL('image/png');
|
snapshot.src = canvas.toDataURL('image/png');
|
||||||
|
|
||||||
|
//Wait until image is loaded
|
||||||
// ✅ Wait until image is loaded
|
snapshot.onload = () => {
|
||||||
snapshot.onload = () => {
|
|
||||||
|
|
||||||
// ✅ Make snapshot visible for Cropper
|
|
||||||
snapshot.classList.remove('hidden');
|
snapshot.classList.remove('hidden');
|
||||||
video.classList.add('hidden');
|
video.classList.add('hidden');
|
||||||
|
|
||||||
// ✅ Alpine reactive update inside nextTick
|
//Alpine reactive update inside nextTick
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.photoTaken = true;
|
this.photoTaken = true;
|
||||||
|
|
||||||
// ✅ Destroy old cropper if exists
|
//Destroy old cropper if exists
|
||||||
if (this.cropper) this.cropper.destroy();
|
if (this.cropper) this.cropper.destroy();
|
||||||
|
|
||||||
// ✅ Use requestAnimationFrame to ensure browser painted the image
|
// ✅ Use requestAnimationFrame to ensure browser painted the image
|
||||||
@@ -372,11 +370,10 @@ snapshot.onload = () => {
|
|||||||
|
|
||||||
this.stopCamera(); // stop camera after Cropper starts
|
this.stopCamera(); // stop camera after Cropper starts
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
async uploadCroppedImage() {
|
async uploadCroppedImage() {
|
||||||
|
|
||||||
@@ -436,9 +433,17 @@ snapshot.onload = () => {
|
|||||||
// console.error(data.text);
|
// console.error(data.text);
|
||||||
// }
|
// }
|
||||||
if (data.success) {
|
if (data.success) {
|
||||||
const serials = Array.isArray(data.text) ? data.text.join("\n") : data.text;
|
// const serials = Array.isArray(data.text) ? data.text.join("\n") : data.text;
|
||||||
alert("OCR Result:\n" + serials);
|
// alert("OCR Result:\n" + serials);
|
||||||
console.log(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 {
|
else {
|
||||||
alert("OCR Failed: " + data.error);
|
alert("OCR Failed: " + data.error);
|
||||||
|
|||||||
Reference in New Issue
Block a user