每次我使用签名创建新用户时，我的签名文件都会损坏

Question

每次我创建带有签名的新用户时，我都会遇到问题。文件大小变为 0kb 并且无法打开，我尝试访问它可以工作但不显示的文件。

所以我有这个控制器来存储具有新签名的新用户。

 public function store(Request $request)
    {
        // Save Signature from data URL to storage
        $signatureData = $request->signature;
        $fileName = time() . '.png';
        $filePath = 'public/signatures/' . $fileName;  // Save to storage/app/public
        $imageData = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $signatureData));
        Storage::put($filePath, $imageData);

        // Validasi dan penyimpanan data user
        $user = User::create([
            'name' => $request->name,
            'user_code' => $request->user_code,
            'password' => Hash::make($request->password),
            'signature_path' => 'signatures/' . $fileName,  // Save part of path todatabase
        ]);

        // Add role(Jabatans) to user with pivot table
        $user->jabatans()->attach($request->jabatan_id);
        Session::flash('success', 'User Berhasil Dibuat');
        return redirect()->route('user-create');
    }

我得到了这个签名代码块

<div class="mb-3">
                     <label for="signature">Signature</label>
                     <canvas id="signature-pad" class="signature-pad" width=400 height=200 style="border:1px solid black;"></canvas>
                            <button type="button" id="clearSignature" class="btn btn-secondary mt-2">Clear
                                Signature</button>
</div>

这是我使用签名板库的 Javascript

<script>
    var canvas = document.getElementById('signature-pad');
    var signaturePad = new SignaturePad(canvas);

    // Function to check if the form is completely filled out
    function isFormValid(formId) {
        const form = document.getElementById(formId);
        return form.checkValidity();
    }

    // Function to display SweetAlert confirmation
    function showConfirmationAlert() {
        if (isFormValid('userForm')) { 
            // Replace 'userForm' with your form's ID
            Swal.fire({
                title: 'Are you sure?',
                text: 'Do you want to submit this form?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Submit the form
                    document.getElementById('userForm').submit(); 
                    // Replace 'userForm' with your form's ID

                    // Show success alert
                    Swal.fire(
                        'Success!',
                        'Your form has been submitted.',
                        'success'
                    );
                }
            });
        } else {
            Swal.fire(
                'Error!',
                'Please fill out all required fields.',
                'error'
            );
        }
    }

    // Add an event listener to the clear signature button
    document.getElementById('clearSignature').addEventListener('click', function() {
        signaturePad.clear();
    });

    // Add an event listener to the submit button
    document.getElementById('submitButton').addEventListener('click', function(e) {
        e.preventDefault();

        // Check the signature first
        if (signaturePad.isEmpty()) {
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: 'Please provide your signature.',
            });
            return;
        }

        // Then, check for user code duplication
        const userCode = document.getElementById('user_code').value;

        fetch('/check-usercode', {
                method: 'POST',
                body: JSON.stringify({
                    user_code: userCode
                }),
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.exists) {
                    // If the user code already exists, show a warning with SweetAlert
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'User code already exists!',
                    });
                } else {
                    // If the user code is unique, display a form submission confirmation
                    showConfirmationAlert();
                }
            })
            .catch(error => console.error('Error:', error));
    });
</script>

*在我的刀片中编辑整个 JS

所以我尝试预览签名图像，但图像没有显示，我已经链接了我的存储/应用程序/公共/签名/。它有效，并且文件已创建，问题是文件始终无法打开或损坏。以前可以用，后来就不行了：D

Answer 1

Base64 包含不在

\w

中的字符。使用

[\w+/=]+

或

.*?

。