Signature_pad: 서버 파일에 이미지 저장

에 만든 2016년 06월 27일 · 11코멘트 · 출처: szimek/signature_pad

안녕하세요, 서명을 png 이미지와 같은 서버 파일에 저장하려고 하는데 어떻게 해야 할지 모르겠습니다(내 애플리케이션에서 php와 javascript를 사용하고 있습니다).

감사합니다!

출처

davidosuna1987

가장 유용한 댓글

안녕하세요 @stupendomen

이전 코드로 새 .php 파일(signature_pad.php)을 만들고 서명 패드가 포함된 파일에서 ajax 함수로 호출합니다(저장 버튼을 당길 때).
이 같은:

`
var 래퍼 = document.getElementById("서명 패드"),
clearButton = wrapper.querySelector("[데이터 작업 = 지우기]"),
saveButton = wrapper.querySelector("[데이터 작업=저장]"),
캔버스 = wrapper.querySelector("캔버스"),
서명 패드;

// 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 에 2016년 07월 12일

👍4 🚀1 🎉1

모든 11 댓글

이 코드로 해결:

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 에 2016년 06월 28일

👍4 🚀1 🎉1

안녕,
같은 문제가 있지만 어디에 코드를 추가해야 합니까?

감사합니다!

stupendomen 에 2016년 07월 12일

안녕하세요 @stupendomen

이전 코드로 새 .php 파일(signature_pad.php)을 만들고 서명 패드가 포함된 파일에서 ajax 함수로 호출합니다(저장 버튼을 당길 때).
이 같은:

// 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 에 2016년 07월 12일

👍4 🚀1 🎉1

완벽한!
감사 해요

stupendomen 에 2016년 07월 13일

@davidosuna1987 이 두 줄은 어디서 나온 건가요?
var form_receiver_name = $("#form_receiver_name").val();
var id_image_name = $("#id_image_name").val();