-3

I am using the jQuery Signare Pad found here, with the source and demo: http://www.jqueryscript.net/mobile/Simpe-Mobile-Signature-Pad-with-jQuery-Html5-Canvas.html

Right now all it does is show the image of your signature when you click done. So it now with the image on the page, how can I get this to go over when I submit my form.

I am submitting my form to a PDF converter called mPDF using a modified version of this: http://mpdf1.com/manual/index.php?tid=373

What I would want now is to get it from that image on the page to be an image on the PDF, as when you click submit it does not know to pull that image over.

I am not the most savvy in PHP as I'm learning as I go, any help would be greatly appreciated.

Updated code provided by Thanasis Grammatopoulos 

function fun_submit() {
if(isSign) {
    var canvas = $("#canvas").get(0);
    var imgData = canvas.toDataURL();
    //Here the code change, do not display image, sent it to the server
    $.ajax({
        type: "POST",
        url: "script.php",
        data: { 
            imgBase64: imgData
        }
    }).done(function(o){
        alert('Submited.');
    });

    closePopUp();
} else {
    alert('Please sign');
}

}

PHP: 

<?php
define('UPLOAD_DIR', 'up/');
$img = $_POST['imgData'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
?>

Still only provides a 0kb .png file on the server with nothing in it. Where do I go from here?

Larry
  • 43
  • 1
  • 10
  • 1
    It seems you already asked this and got an answer (http://stackoverflow.com/questions/26262319/jquery-mobile-signature-pad-how-to-add-to-form-submission). You should add more details there instead of asking the same question again and deleting the previous one. – jeroen Oct 08 '14 at 21:22
  • Didn't I already answer this same question a couple hours ago? What exactly are you trying to do? Have you any example code? – Brian Oct 08 '14 at 21:23
  • @Brian You did, but you'll need a lot more rep to see the deleted question and your answer :-) – jeroen Oct 08 '14 at 21:24
  • What do you want to submit to? Do you want to save the image as a file? Do you want to save it in a database? Do you want to email it? – Brian Oct 08 '14 at 21:25
  • I made an update with some code, what is the next part? I tried what you said Brian and all it did was post an image of the logo.png. – Larry Oct 08 '14 at 21:26
  • It depends what you are trying to have as an end result. What do you want to do with the image? Do you have a form with a submit button where you want to submit it to a server somewhere? There just isnt enough info to be able to tell you what to do next. – Brian Oct 08 '14 at 21:29
  • Its being submitted to PDF, using a modified version of http://mpdf1.com/manual/index.php?tid=373 Yes there is a submit button. This is going to be for a contract form. Right now they are just using paper, and I am trying to make it digital for them. Hoping I can figure out the signature part – Larry Oct 08 '14 at 21:29
  • So you have the pdf file being generated and you want to do something with that pdf file? – Brian Oct 08 '14 at 21:31
  • Not really. Right now as it is, when you draw in your signature it just puts an image on the page with the signature. When you press the submit button to convert the contract to PDF the signature is not there because there is nothing linking it to transfer that image over. This is the part I'm confused about. – Larry Oct 08 '14 at 21:36

1 Answers1

1

You just have to sent the image to the server. Change your code to:

function fun_submit() {
    if(isSign) {
        var canvas = $("#canvas").get(0);
        var imgData = canvas.toDataURL();
        //Here the code change, do not display image, sent it to the server
        $.ajax({
            type: "POST",
            url: "script.php",
            data: { 
                imgBase64: imgData
            }
        }).done(function(o){
            alert('Submited.');
        });

        closePopUp();
    } else {
        alert('Please sign');
    }
}

More info here : How to save a HTML5 Canvas as Image on a server

Community
  • 1
  • 1
GramThanos
  • 3,572
  • 1
  • 22
  • 34
  • What if I want to display it, it is going to be for a contract form. I want it to be displayed on the form that gets submitted to PDF using http://mpdf1.com/manual/index.php?tid=373 – Larry Oct 08 '14 at 21:40
  • Ok, then display it on the form, and then, add an event 'onsubmit' on the form so that you can post all the data with the javascript. Or, you can make a hidden input inside the form and add the imgData as a value on the hidden input. – GramThanos Oct 08 '14 at 21:45
  • What is "script.php" in this scenario. I've tried making it a hidden input but I'm not understanding how to link it to the submission. I'm trying to do $SignSig=$_POST['my_hidden']; but it displays nothing. – Larry Oct 08 '14 at 23:32
  • Do your form has the method="POST" attribute? – GramThanos Oct 09 '14 at 14:48
  • Ive tried this, and about 5 others and they all just create 0kb .png files. I'll update my post with what I'm using. – Larry Oct 09 '14 at 16:03