jSignature image export to PHP email

Question

I need help with jSignature. I am able to create an image and then write that image back into the page. What I can't get working (and the reason I was exploring this plugin in the first place) is the exporting of the image out of the page. I want to take the image data and send it out in an email so that the image shows up in the body of the email. If have tried a lot of approaches and nothing has worked. Currently my js looks like this:

var $sigDiv = $("#signature").jSignature();
      $('<input type="button" value="Reset">').bind('click', function(e){
        $sigDiv.jSignature('reset');
      }).appendTo($sigDiv);

And upon submit of the form it looks like this:

var datapair = $sigDiv.jSignature("getData", "svg");
      var i = new Image();
      i.src = "data:" + datapair[0] + "," + datapair[1];
      $(i).appendTo($("#success"));

I try to grab that image data in a variable and through AJAX send it in a data string to a PHP mail processing form doing something like this:

<img src="<?php echo $_POST['signature']; ?>"/>

Or this:

<object src="<?php echo $_POST['signature']; ?>"></object>

I've exhausted myself on trying to get this to display an image in the email that goes out. Any help is much appreciated.

Answer 1

YEHESSS! Got it to work. If I export as an image and do encodeURIComponent(image) on the image the AJAX call doesn't screw up the image data. Works like a BEAST now. Hey thanks for your help Abid.

Answer 2

i am not sure but you see below url i think it is help full to you

https://github.com/brinley/jSignature/

demo url ;-

http://willowsystems.github.com/jSignature/#/demo/

jSignature is a jQuery plugin which simplifies creation of a signature capture field in the browser window, allowing a user to draw a signature using mouse, pen, or finger.

jSignature captures signature as vector outlines of the strokes. Although jSignature can export great bitmap (PNG) too, extraction of highly scalable stroke movement coordinates (aka vector image) of the signature allows much greater flexibility of signature rendering.

A extra effort (through smoothing and pressure simulation) is made to make the strokes look pretty on the screen while these are drawn by the signor.

All major desktop, tablet and phone browsers are supported. HTML5 Canvas element is used by default. We fall back on Flash-based Canvas element emulator (FlashCanvas) when actual Canvas is not supported by the browser (Iinternet Explorer v.8 and lower).

Real-time jSignature renders only the device-appropriate "prettiest" approximation of what we capture. Capture of data is always same - we capture as many movement coordinates as possible. Rendering of strokes differs per browser's capabilities, efficiency of the device, screen size.

This degrading and enhancing of screen representation of the captured signature is done on purpose to insure that rendering does not impead on the responsiveness of capture. For example, on slow rendering devices (Android Browser, FlashCanvas-based Canvas emulation) smoothing is kicked up a notch to compensate for large gaps in captured stroke coordinates - a result of inefficiency of capture device. In all cases, customer shold be pleased by responsiveness and beauty of the drawing.

jSignature makes it easy to pluck itself into an existing styled site. jSignature automatically detects the colors used on the wrapping element (text color = pen color, background = background) and auto-picks a pleasing middle-shade for 'decor' (signature line). jSignature adapts well to fixed and variable width web page designs, and various size screens (phones, tablets, computer screens) and automatically rescales the drawing area and signature when parent element changes size