1

I have a canvas on my webpage that allows user's to sign their signature (using jSignature). I convert it to a png client side using canvasg and now need to submit it to Quickbase. I know how to upload images to quickbase already, my issue however is getting the file from my client side code in my index.html page, to my server side code in submit_signature.php.

        $("#save").click(function(){
          var datapair = sigdiv.jSignature("getData", "svg");
          var i = new Image();
          i.src = "data:" + datapair[0] + "," + datapair[1];
          $(i).appendTo($("#outputSvg"));

          var canvas = document.getElementById("canvas");

          canvg(canvas, datapair[1]);

          var img = canvas.toDataURL("image/png");
          $("#outputRaster").append("<img src='"+img+"' name='image' />");
        });

jsFiddle

Any help would be greatly appreciated! Thanks!

FunkyMonk91
  • 1,469
  • 1
  • 17
  • 30
  • since you're using a dataurl, you can send that to the server via an ajax call and then base64-decode it – Marc B Dec 07 '12 at 16:10
  • There is a method on canvas called toBlob which will allow easy upload via XHR2. But its not supported yet. This stackoverflow answer seems to have a workaround: http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata/5100158#5100158 – syazdani Dec 07 '12 at 16:16

2 Answers2

3

The author of jSignature recommends that you don't save it as an image (http://willowsystems.github.com/jSignature/#/about/).

I know you are tempted to want "images" from jSignature, but, please, control yourself, and stay away. Instead, contemplate capturing "base30" or "svg" data and enhance + render that in postproduction, server-side.

He states a few reason below. If these reason make sense to you and you can use ImageMagick, you may consider using jSignature'svg plugin and posting that result to your server via AJAX. Then you could use the answer from this question: Rendering an SVG file to a PNG or JPEG in PHP

If you have to upload the image as base64 encoded string to be inserted into the database, and other options aren't available, jSignature has an image export plugin that will convert it to base64 for you.

default (EXPORT ONLY) (BITMAP) data format is compatible with output format jSignature produced in earlier versions when getData was called without arguments. "Default" is now invoked (obviously) by default whenever you $obj.jSignature("getData") The data format is that produced natively by Canvas - data-url-formatted, base64 encoded (likely PNG) bitmap data that looks like this: data:image/png;base64,i1234lkj123;k4;l1j34l1kj3j... This export call returns a single data-url-formatted string.

Community
  • 1
  • 1
Sarcastron
  • 1,527
  • 14
  • 20
  • Yeah, normally I would agree 100%. I have been tasked with doing it the way I am asking for however. Other things depend on the image etc etc etc – FunkyMonk91 Dec 07 '12 at 18:30
1

I personally would use js to post the image to the PHP page. This page would then save the image to a directory and insert a reference to the file in the database.

NEVER store images directly in the database. Not only does this use up huge amounts of space it also causes massive slowdown.

Hope this helps.

evolutionxbox
  • 3,932
  • 6
  • 34
  • 51