Signature_pad: サーバーファイルに画像を保存する

作成日 2016年06月27日  ·  11コメント  ·  ソース: szimek/signature_pad

こんにちは、サーバーファイルにpng画像のような署名を保存しようとしていますが、どうすればよいかわかりません(アプリケーションでphpとjavascriptを使用しています)。

ありがとう!

最も参考になるコメント

こんにちは@stupendomen

前のコードで新しい.phpファイル(signature_pad.php)を作成し、署名パッドを含むファイルでajax関数を使用して呼び出します(保存ボタンを引いたとき)。
このようなもの:

`
varwrapper = 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);
                });

`

これがお役に立てば幸いです!

全てのコメント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";
}

こんにちは、
同じ問題がありますが、コードをどこに追加する必要がありますか?

ありがとう!

こんにちは@stupendomen

前のコードで新しい.phpファイル(signature_pad.php)を作成し、署名パッドを含むファイルでajax関数を使用して呼び出します(保存ボタンを引いたとき)。
このようなもの:

`
varwrapper = 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これらの2つの行はどこから来ていますか?
var form_receiver_name = $( "#form_receiver_name")。val();
var id_image_name = $( "#id_image_name")。val();

@ davidosuna1987 @stupendomenこれで問題が発生しました! これを機能させる方法を教えてもらえますか?上記のコードを正確にコピーし、dbconenct.phpファイルを追加しましたが、何も得られませんでした。 できるだけ早く助けてください

完全なコードを投稿できますか? お願いします

ありがとう!

ありがとう。 非常に便利 !

ありがとう!

@ davidosuna1987
よろしくお願いします。

しかし、新しいバージョンのSignaturePadまたは古いバージョンでは動作させることができませんでした。
誰かがphpでの使用例を挙げてもらえますか?

どうもありがとうございました

このページは役に立ちましたか?
0 / 5 - 0 評価

関連する問題

auam88 picture auam88  ·  4コメント

c2ofh picture c2ofh  ·  7コメント

chitgoks picture chitgoks  ·  5コメント

crazzeto picture crazzeto  ·  8コメント

derUli picture derUli  ·  3コメント