Save image on server file

[davidosuna1987]

Hi, I'm trying to save the signature like an png image in a server file, but i don't know how can i do this (i'm using php and javascript in my application).

Thank you!

[davidosuna1987]

Solved with this 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";
}

[stupendomen]

Hi,
I have the same problem but where should be added your code?

Thank you!

[davidosuna1987]

Hi @stupendomen

I make a new .php file (signature_pad.php) with the previous code and I call it with ajax function in file whose contains signature pad (when you pull save button).
Something like this:

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

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

`

I wish that this will be useful for you!

[stupendomen]

Perfect!
Thanks

[Mrboutte]

@davidosuna1987 where are these two lines coming from?
var nombre_receptor_form = $("#nombre_receptor_form").val();
var id_nombre_imagen = $("#id_nombre_imagen").val();

[ADHUB]

@davidosuna1987 @stupendomen I am having trouble with this! Are you able to show me how to get this working I've copied the code above exactly and added dbconenct.php file and yet got nothing. Please help ASAP

[utamy]

can u post full code? please

[AtlasLearner]

Thank you!

[lorajc]

Thanks. Very useful !

[amine-damani]

Thank you!

[delahuerga]

@davidosuna1987
Good, thanks for the contribution.

But I could not make it work with the new version of SignaturePad or with the old one.
Could someone put an example of use in php?

Thank you very much