Signature_pad: Bild in Serverdatei speichern

Gelöst mit diesem Code:

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";
}

Hallo,
Ich habe das gleiche Problem, aber wo sollte Ihr Code hinzugefügt werden?

Danke schön!

Hallo @stupendomen

Ich erstelle eine neue .php-Datei (signature_pad.php) mit dem vorherigen Code und rufe sie mit der Ajax-Funktion in der Datei auf, deren Signaturpad enthalten ist (wenn Sie die Schaltfläche „Speichern“ ziehen).
Etwas wie das:

`
var wrapper = document.getElementById("signature-pad"),
clearButton = wrapper.querySelector("[data-action=clear]"),
saveButton = wrapper.querySelector("[data-action=save]"),
canvas = wrapper.querySelector ("Leinwand"),
SignaturPad;

// 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);
                });

`

Ich wünsche, dass dies für Sie nützlich sein wird!

Perfekt!
Danke

@davidosuna1987 Woher kommen diese beiden Zeilen?
var form_receiver_name = $("#form_receiver_name").val();
var id_image_name = $("#id_image_name").val();

@davidosuna1987 @stupendomen Ich habe Probleme damit! Können Sie mir zeigen, wie ich das zum Laufen bekomme? Ich habe den obigen Code genau kopiert und die Datei dbconenct.php hinzugefügt, aber nichts bekommen. Bitte helfen Sie so schnell wie möglich

kannst du den vollständigen Code posten? bitte

Danke schön!

Danke. Sehr hilfreich !

Danke schön!

@davidosuna1987
Gut, danke für den Beitrag.

Aber ich konnte es weder mit der neuen Version von SignaturePad noch mit der alten zum Laufen bringen.
Könnte jemand ein Beispiel für die Verwendung in PHP einfügen?

Vielen Dank