Signature_pad: حفظ الصورة في ملف الخادم

حل مع هذا الرمز:

if (isset($_POST['imageData'])) {
    $imgData = base64_decode($_POST['imageData']);
    $image_name= $_POST['image_name'];

    // Path where the image is going to be saved
    $filePath = '../img/'.$image_name.'.jpg';

    // Delete previously uploaded image
    if (file_exists($filePath)) { unlink($filePath); }

    // Write $imgData into the image file
    $file = fopen($filePath, 'w');
    fwrite($file, $imgData);
    fclose($file);
} else {
    echo "imgData doesn't exists";
}

مرحبا،
لدي نفس المشكلة ولكن أين يجب إضافة الرمز الخاص بك؟

شكرا لك!

مرحبا @ stupendomen

أقوم بإنشاء ملف .php جديد (signature_pad.php) بالرمز السابق وأطلق عليه وظيفة ajax في الملف الذي يحتوي على لوحة توقيع (عند سحب زر الحفظ).
شيء من هذا القبيل:

"
var المجمع = document.getElementById ("signature-pad") ،
clearButton = wrapper.querySelector ("[data-action = clear]")،
saveButton = wrapper.querySelector ("[data-action = save]") ،
قماش = wrapper.querySelector ("canvas") ،
التوقيع

// Adjust canvas coordinate space taking into account pixel ratio,
// to make it look crisp on mobile devices.
// This also causes canvas to be cleared.
    function resizeCanvas() {
        // When zoomed out to less than 100%, for some very strange reason,
        // some browsers report devicePixelRatio as less than 1
         // and only part of the canvas is cleared then.
        var ratio =  Math.max(window.devicePixelRatio || 1, 1);
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext("2d").scale(ratio, ratio);
    }
    window.onresize = resizeCanvas;
    resizeCanvas();
    signaturePad = new SignaturePad(canvas);

    clearButton.addEventListener("click", function (event) {
         signaturePad.clear();
    });

    saveButton.addEventListener("click", function (event) {
        event.preventDefault();
        var nombre_receptor_form = $("#nombre_receptor_form").val();
        var id_nombre_imagen = $("#id_nombre_imagen").val();

        if ( signaturePad.isEmpty() ) {
            alert("Please insert signature.");
        } else {
            var dataUrl = signaturePad.toDataURL();
            document.getElementById('imagen_firma').src = dataUrl;
            var imagen = dataUrl.replace(/^data:image\/(png|jpg);base64,/, "");
                $.ajax({
                    url: './includes/signature_pad.php',
                    type: 'POST',
                    data: {
                        imageData: imagen
                    },
                })
                .done(function(msg) {
                    // Image saved successfuly.
                    console.log("success: " + msg);
                    document.getElementById("my_form").submit(); //I do this to save other information.
                })
                .fail(function(msg) {
                    console.log("error: " + msg);
                });

"

أتمنى أن يكون هذا مفيدًا لك!

في احسن الاحوال!
شكرا

@ davidosuna1987 من أين يأتي هذان الخطان؟
var form_receiver_name = $ ("# form_receiver_name"). val () ؛
var id_image_name = $ ("# id_image_name"). val ()؛

@ davidosuna1987 @ stupendomen لدي مشكلة مع هذا! هل أنت قادر على أن تريني كيفية الحصول على هذا العمل لقد قمت بنسخ الكود أعلاه بالضبط وإضافة ملف dbconenct.php ولم أحصل على أي شيء حتى الآن. الرجاء المساعدة في أسرع وقت ممكن

هل يمكنك نشر كود كامل؟ من فضلك

شكرا لك!

شكرا. مفيد جدا !

شكرا لك!

@ davidosuna1987.
جيد ، شكرا على المساهمة.

لكنني لم أتمكن من العمل مع الإصدار الجديد من SignaturePad أو مع الإصدار القديم.
هل يمكن لأحد أن يضع مثالا على الاستخدام في php؟

شكرا جزيلا لك