2

I am trying to use the Drawing app found here: https://github.com/brinley/jSignature/

The situation:

1

Edit pad where images can be drawn Button that extracts the image and sends the image by AJAX to another file

2

The second file fetches the image and writes it as a file.

The problem

The signature field works just fine. However extracting the data and send it to another file does not.

function GetCanvasContents() {
    var datapair = $("#signature").jSignature("getData", "svgbase64")
    var i = new Image()
    i.src = "data:" + datapair[0] + "," + datapair[1]
    $(i).appendTo($("#displayarea"))
    var SetImage = $("#frameDemo").contents();

    SendSignatureImage(SetImage);
}

function SendSignatureImage(Image) {
    ///######## SENDING THE INFORMATION BY AJAX
    $.ajax({
        type:   "POST",             ///######## SEND TYPE
        url:    "fetchimage.php",   ///######## TARGET FILE TO RETRIEVE INFORMATION
        data: {
            'image': Image
        },
        ///######## IN CASE OF SUCCESS
        success: function (response) {
            if (response == "ok") {
                alert("correct");
            }
            else {
                alert("Response = " + response);
            }
        }
    }
    );
}

The HTML code :

<div>
<div id="content">
    <button name="GetContents" onclick="GetCanvasContents();">Get contents</button>
    <div id="signatureparent">
        <div id="signature">
        </div>
    </div>
    <div id="tools"></div>
    <div><p>Display Area:</p><div id="displayarea"></div></div>
</div>
<div id="scrollgrabber"></div>
</div>
Community
  • 1
  • 1
Alex
  • 1,223
  • 1
  • 19
  • 31

1 Answers1

2

You'd have to send the base64 encoded XML string that's in your datapair[1] variable to the PHP page and then convert that to an image on the server side in PHP.

Olena Vikariy
  • 217
  • 1
  • 3
  • 9