Laravel Livewire Фирменная площадка не создает знак ⇐ Javascript

[Anonymous]

Я создаю многоэтапную форму в Laravel Livewire, имея 3 шага. Шаг 1 и 2 работают нормально. Шаг 3 содержит подпись, когда я пытаюсь создать знак с помощью мыши, я ничего не вижу. < /P>

Step 3: Signature
Please provide a signature below.

{{-- Signature pad container --}}

Officer's Signature



{{-- Hidden input to store signature data --}}



Clear Signature


@error('signature')
{{ $message }}
@enderror





@push('scripts')

document.addEventListener("livewire:load", function() {
// This function will handle the initialization
function initSignaturePad() {
const canvas = document.getElementById("signature-pad");
if (!canvas) {
console.warn('Signature pad canvas not found.');
return;
}

// Ensure the canvas is not already initialized
if (canvas.signaturePad) {
canvas.signaturePad.clear();
} else {
canvas.signaturePad = new SignaturePad(canvas);
}

const signaturePad = canvas.signaturePad;

function resizeCanvas() {
const ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}

resizeCanvas();
window.addEventListener("resize", resizeCanvas);

// Re-bind events to the new signaturePad instance
signaturePad.onEnd = function() {
let data = signaturePad.toDataURL("image/png");
document.getElementById("signature_input").value = data;
@this.set("signature", data);
};

document.getElementById("clear-signature").addEventListener("click", function() {
signaturePad.clear();
document.getElementById("signature_input").value = "";
@this.set("signature", null);
});
}

// Run on initial load if step 3 is active
if (@this.currentStep === 3) {
initSignaturePad();
}

// Re-init after each Livewire update
Livewire.hook("message.processed", (message, component) => {
// Check if we are on step 3 after the update
if (component.currentStep === 3) {
initSignaturePad();
}
});
});

@endpush
< /code>
Это класс Multistepform Livewire. В методе сохранения я хочу сохранить подпись в виде изображения в публичном каталоге: < /p>
public $signature;
public $savedSignature;

private function validateStep(int $step): void
{
$rules = [
1 => [
...
],
2 => [
...
],
3 => [
'signature' => 'required|string',
],

];

$messages = [
...
'signature.required' => 'Signature is required.',
];

$this->validate($rules[$step] ?? [], $messages);

}

public function save()
{
$this->validateStep($this->currentStep);

$in = Inp::updateOrCreate(
...
);

if ($this->signature) {
$imageData = $this->signature;
$image = str_replace('data:image/png;base64,', '', $imageData);
$image = str_replace(' ', '+', $image);
$imageName = 'signature_' . time() . '.png';

$path = public_path('signatures');
if (!\File::exists($path)) {
\File::makeDirectory($path, 0755, true);
}

\File::put($path . '/' . $imageName, base64_decode($image));

$this->savedSignature = $imageName;

// if you want to store filename in inspections table
$inspection->signature = $imageName;
$inspection->save();
}

session()->flash('success','Saved successfully!');
return redirect()->route('in.create');
}


Подробнее здесь: https://stackoverflow.com/questions/797 ... reate-sign