How can I save a dynamically generated image to database

Question

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!

Answer 1

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.

Answer 2

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.