Signature_pad: Simpan gambar di file server

Dibuat pada 27 Jun 2016 · 11Komentar · Sumber: szimek/signature_pad

Hai, saya mencoba menyimpan tanda tangan seperti gambar png di file server, tetapi saya tidak tahu bagaimana saya bisa melakukan ini (saya menggunakan php dan javascript di aplikasi saya).

Terima kasih!

Sumber

davidosuna1987

Komentar yang paling membantu

Hai @stupendomen

Saya membuat file .php baru (signature_pad.php) dengan kode sebelumnya dan saya menyebutnya dengan fungsi ajax di file yang berisi pad tanda tangan (ketika Anda menarik tombol simpan).
Sesuatu seperti ini:

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

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

Saya berharap ini akan bermanfaat bagi Anda!

davidosuna1987 pada 12 Jul 2016

👍4 🚀1 🎉1

Semua 11 komentar

Dipecahkan dengan kode ini:

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

davidosuna1987 pada 28 Jun 2016

👍4 🚀1 🎉1

Hai,
Saya memiliki masalah yang sama tetapi di mana harus menambahkan kode Anda?

Terima kasih!

stupendomen pada 12 Jul 2016

Hai @stupendomen

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

Saya berharap ini akan bermanfaat bagi Anda!

davidosuna1987 pada 12 Jul 2016

👍4 🚀1 🎉1

Sempurna!
Terima kasih

stupendomen pada 13 Jul 2016

@davidosuna1987 dari mana dua baris ini berasal?
var form_receiver_name = $("#form_receiver_name").val();
var id_image_name = $("#id_image_name").val();

Mrboutte pada 27 Okt 2016

@davidosuna1987 @stupendomen Saya mengalami masalah dengan ini! Apakah Anda dapat menunjukkan kepada saya cara membuatnya berfungsi? Saya telah menyalin kode di atas dengan tepat dan menambahkan file dbconenct.php namun tidak mendapatkan apa-apa. Tolong bantu secepatnya