Code Monkey home page Code Monkey logo

jsignature's Introduction

jSignature

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 (Internet 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.

See demos here.

Adding jSignature to your page

Look into libs folder in the source tree. Pick 3 files from there:

  1. jSignature.min*.js (The '*' means you have choice. You can pick regular jQuery-centric build or a special jQuery.NoConflict build.)

  2. flashcanvas.js

  3. flashcanvas.swf

jSignature depends on (more or less recent) jQuery

If you do NOT intend to support IE 7 and 8 you don't need to download the FlashCanvas files.

Note that FlashCanvas is a cohesive group of two files, flashcanvas.swf and flashcanvas.js, both of which must be located together in the same folder. Do not host them from separate folders as flashcanvas.js looks for flashcanvas.swf in the same folder it was served from. Do not rename flashcanvas.js to anything else as it looks for itself in the DOM by that name to figure out where to load flashcanvas.swf from.

jSignature itself has three distinct pieces of code rolled into one minified deployable:

  1. Code that prepares a Canvas element. It includes detection of browser features, maximizing a canvas within the confines of a div, setting up emulated Canvas using Flashcanvas, when needed.
  2. Code that handles actual signature capture + data import / export API. It attaches and listens to movement event handlers, stores stroke data inside data structure, handles API calls.
  3. Plugins that help you get the signature data in convenient for you format, like raw data coordinates, image, compressed url-compatible string, SVG.

If you are certain that your audience will be limited to a specific browser engine (you deploy through an embedded browser widget, using something like PhoneGap) you can roll up your sleeves and yank out the part #1. If you know you will need only one export / import plugin, remove the plugins you don't need from the minified deployable.

More custom data export/import plugins can be loaded separately without reminifying the main deployable. But, minifying is fun and easy to do. Just take a look at wscript.py file and change a few lines to include / exclude some parts.

For the "generic" deployment scenario (which includes support of old IE) add this to your page:

<!-- this, preferably, goes inside head element: -->
<!--[if lt IE 9]>
<script type="text/javascript" src="path/to/flashcanvas.js"></script>
<![endif]-->

<div id="signature"></div>

<!-- you load jquery somewhere before jSignature ... -->
<script src="path/to/jSignature.min.js"></script>
<script>
    $(document).ready(function() {
        $("#signature").jSignature()
    })
</script>

Explained:

  • The [if lt IE 9] part loads Flashcanvas library for IE less than 9. (Flashcanvas is supported only on IE, so, there is no point doing feature detection.)
  • We mark a div inside which the canvas element will be created. Any ID or other jQuery selector will do.
  • We load jSignature plugin.
  • Lastly, the script invokes the signature widget within the specified DIV.

API

The following method becomes exposed on top of jQuery objects: .jSignature(String command, *args)

Arguments vary per command. When provided, command is expected to be a string with a command for jSignature. Commands supported at this time:

  • init is the default, assumed action. init takes one argument - a settings Object. You can omit the command and just pass the settings object in upon init. Returns (in a traditional jQuery chainable way) jQuery object ref to the element onto which the plugin was applied.
  • reset just clears the signature pad, data store (and puts back signature line and other decor). Returns (in a traditional jQuery chainable way) jQuery object ref to the element onto which the plugin was applied.
  • clear alias of reset for legacy purposes.
  • destroy destroy the instance.
  • getData takes an argument - the name of the data format. Returns a data object appropriate for the data format.
  • setData takes two arguments - data object, data format name. When data object is a string formatted in data-url pattern you don't need to specify the data dormat name. The data format name (mime) will be implied from the data-url prefix. See example below for that. Returns (in a traditional jQuery chainable way) jQuery object ref to the element onto which the plugin was applied.
  • importData alias of setData for legacy purposes.
  • listPlugins takes an argument - a string denoting the category (Only export, import supported at this time) of plugins to list. Returns an array of strings.
  • disable makes the canvas read-only and disable the jSignature buttons
  • enable makes the canvas read-only and enable the jSignature buttons
  • isModified returns a boolean true if the jSignature was modified, false otherwise.
  • getSettings returns the configurable settings of the jSignature instance.
  • updateSetting takes three arguments - setting name, new value, boolean value if the change should affect current signature or future strokes. This allows you to update certain settings like lineWidth or line color and with the third argument you can make the change apply to the existing strokes. At present, updating change to existing strokes only works with a few settings like color. Returns the updated value.

Usage examples:

var $sigdiv = $("#signature")
$sigdiv.jSignature() // inits the jSignature widget.
// after some doodling...
$sigdiv.jSignature("reset") // clears the canvas and rerenders the decor on it.

// Getting signature as SVG and rendering the SVG within the browser. 
// (!!! inline SVG rendering from IMG element does not work in all browsers !!!)
// this export plugin returns an array of [mimetype, base64-encoded string of SVG of the signature strokes]
var datapair = $sigdiv.jSignature("getData", "svgbase64") 
var i = new Image()
i.src = "data:" + datapair[0] + "," + datapair[1] 
$(i).appendTo($("#someelement")) // append the image (SVG) to DOM.

// Getting signature as "base30" data pair
// array of [mimetype, string of jSignature's custom Base30-compressed format]
datapair = $sigdiv.jSignature("getData","base30") 
// reimporting the data into jSignature.
// import plugins understand data-url-formatted strings like "data:mime;encoding,data"
$sigdiv.jSignature("setData", "data:" + datapair.join(",")) 

See tests and index.html for more examples.

Data Import / Export (and Plugins)

The following plugins (data formats) are part of mainline jSignature minified distributable:

  • 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.
  • native (EXPORT AND IMPORT) (VECTOR) data format is custom representation of drawing strokes as an array of objects with props .x, .y, each of which is an array. This JavaScript objects structure is the actual data structure where each of the drawing strokes is stored in jSignature. The structure is designed specifically for speed and efficiency of collecting strokes data points. (Although it is a bit counter-intuitive, octopus-looking structure, it (a) allows to pile up two-axis coordinates fast without a need to create a Point objects for each data point and (b) provides for very easy loop-based processing of data.) Although you could JSONify that, pass it around, parse, render from this, it may not be the most efficient way to store data, as internal format may change in other major versions of jSignature. I recommend looking at base30 format as a direct, but compact equivalent to "native"-as-JSON. What this data is good for is running stats (size, position of signature on the canvas) and editing strokes (allowing for "undo last stroke," for example).
  • base30 (alias image/jSignature;base30) (EXPORT AND IMPORT) (VECTOR) data format is a Base64-spirited compression format tuned for absurd compactness and native url-compatibility. It is "native" data structure compressed into a compact string representation of all vectors. Code examples (.Net, PHP, Ruby) detailing decompression of this format into render-able form (SVG, language-native coordinate arrays) are provided in the extras folder. One of possible ways of communicating the data to the server is JSONP, which has a practical URL length limit (imposed by IE, of course) of no more than 2000+ characters. This compression format is natively URL-compatible without a need for re-encoding, yet will fit into 2000 characters for most non-complex signatures.
  • svg (alias image/svg+xml) (EXPORT ONLY) (VECTOR) data format produces the signature as an SVG image (SVG XML text). All strokes are denoised and smoothed. This format is a good medium between "easy to view" and "hightly scalable." Viewing SVGs is natively supported in majority of today's browsers and, yet, this format can be infinitely scaled and enhanced for print. Data is textual, allowing for easy storage and transfer. The call to jSignature("getData","svg") returns an array of form ["image/svg+xml","svg xml here"].
  • svgbase64 (alias image/svg+xml;base64) (EXPORT ONLY) (VECTOR) This is same as "svg" plugin, but the SVG XML text is compressed using base64 encoding. Although many browsers now have built-in base64 encoder ( btoa() ), some, like Internet Explorer do not. This plugin has its own (short and efficient) copy of software-based base64 encoder which is invoked on the browsers lacking btoa(). The call to jSignature("getData","svgbase64") returns an array of form ["image/svg+xml;base64","base64-encoded svg xml here"]. This two-member array is rather easy to turn into data-url-formatted string ("data:" + data.join(",")) or turn into args and pass to server as form values.
  • image (EXPORT ONLY) (BITMAP) data format is essentially same as "default" above, but parsed apart so that mimetype and data are separate objects in an array structure similar to that produced by "svg" export. Example (shortened) ["image/png;base64","i123i412i341jijalsdfjijl234123i..."]. Because image export filter depends on (somewhat flaky) browser support and picks up needless data, recommend using this only for demonstration and during development.

Choosing the export / storage format.

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.

If you export "bitmap", the image will retain actual drawing colors, size, defects, and, to top it off, may not work on all browsers.

  • The decor (signature line) will be on the image. if jSignature was styled with dark background + light pen color that`s exactly what you will get on the image - dark background, light drawings covering grey signature line. This image becomes virtually useless for print. The matter is worse if your background is same intensity as pen (red on blue, for example) in which case when printed black-and-white the image becomes just a dark grey rectangle. If you ever change page colors, captured image now starts to wear those colors.
  • Androids 1.6 -2.2 (2.3?) dont support canvas.getDataURL method well - the cornerstone of bitmap export functionality.
  • Small screens (mobiles) produce tiny, ugly bitmaps.
  • Bitmap exported by canvas is GARGANTUAN in size compared to vector because it retains all the mid-shaded and background pixels.

If you want to force yourself to use only Black on top of White signature capture web page style forever, DO use bitmap export. If you want to have your database admin scream at you because backup of database with all that bitmap data takes more than a day, DO use bitmap export. If you want your sales / business dept to scream at you because your signature capture format cannot be easily integrated into their new carefully-styled, wizbang product / service, DO use bitmap export. If you want to explain why siganture format export you chose does not work on all target platforms, DO use bitmap export. If you want to take the easy route now, and make the the IT person that will come in after you are fired do the difficult task of applying ImageMagic wisardry upon a mess of colored pixels you decided to collect, DO use bitmap export format.

If the use of the captured signature has anything to do with "business" or "printing" or "multiple presentation venues" use the Vector formats like "base30" or "svg" data and enhance + render that in postproduction. Decompression and sample, rudimentary rendering code (.Net, PHP as of Feb 2012) can be found in "extras" folder. You would use these as core that provides loop-able coordinate data arrays for your own rendering logic.

Events

The dom element upon which jSignature was initialized emits 'change' event immediately after a stroke is done being added to the storage. (In other words, when user is done drawing each stroke. If user draws 3 strokes, this event is emitted 3 times, after each stroke is done.)

Here is how you would bind to that event:

$("#signature").bind('change', function(e){ /* 'e.target' will refer to div with "#signature" */ })

Event is emitted asynchronously through a "thread" ( setTimeout(..., 3) ) so you don't need to wrap your event handler into "thread" of any kind, as jSignature widget will go on and will not be waiting for you to be done with your custom event handler logic.

License, Copyright

MIT License

See source header for full and most current Copyright attributions.

jsignature's People

Contributors

bassrock avatar brinley avatar bwetherall avatar dvdotsenko avatar funkyone avatar gaspowers avatar krazyjakee avatar kxhitiz avatar liyahui avatar martin-sweeny avatar mgedmin avatar mochja avatar n8maninger avatar osharper avatar rburgstaler avatar rogerz avatar tomyam1-personal avatar zevero avatar zspitzer avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jsignature's Issues

Input to asp server

Hello, could anyone help me with inputing signature to asp c# server and writing in to image. I exosted today trying to do that but no result...

Line is positioned above touch point on iPad/iOS

Hi, this is a great library, thankyou so much for sharing this!!

This works perfectly in a browser but when I tested on the latest version of iOS (5.1.1) I noticed that the line being drawn is slightly above the point on the screen that you touch. (I've tested this with a pen too).

It's ok when you get used to it, but for new users it seems to result in the signature going up at an angle as the user tries to compensate.

This is definitely more obvious on an iPad, but also happens to a lesser extent on the iPhone too.

Signatures displayed twice Android HTML5 WebApp on Galaxy Tab 3

i've got a strange behavior in the jQuery plugin jSignature. I'm using it in a Android HTML5 WebApp. If i enter a signature it's displayed twice. This behavior only appears on Galaxy Tab 3, it's working on all other Android devices and in all Browsers.

screenshot_2014-06-20-09-12-39

The code i use is quite simple:

var fs = $('<fieldset/>', {}).appendTo(root);
var div = $('<div/>', {
            id: field.attributes.FieldId,
            name: property.attributes.GenericColumnName,
        }).appendTo(fs);

        div.jSignature({
            'background-color': 'transparent',
            'decor-color': 'transparent',
        });
        div.css('border-style', 'dotted');
        div.css('border-color', 'black');

Has anyone a Idea? I urgent need it for a customer.

Thank you

Undo last stroke

HI,

I have u used your plugin and added different colors of brush.
I have drawn three lines with 3 different color.
but when i click undolast stroke ,it makes all the stroke to same color.

can you explain why i am facing this isssue
Thanks in advance.

Not working with Android 4.0.4

Hi, It seems not to work with Android 4.0.4 (fyi i tried with all the versions of jquery from 1.7.2 up to 1.9.1 , knockout.js from 2.10. to 2.2.1)
But it works just fine with previous version of Android for example 2.3.6 , and in all common browsers
Any clue ?

Opera Mini on Android: Page starts at the wrong size.

In Opera Mini, the signature displays as longer than the width of the display area.
I believe this is an Opera Mini issue, but I fixed this by adding the following :

    @-o-viewport {
      width: 100%;
      zoom: 1;
    }

to the CSS .

jSignature and print.css

Hi,

I'm using a dark theme where the text color is white. So the signature is white.
However, when I print, I'd like to change the color to black. I use a css file for printing and can change the text color to black but not the signature which remains white.
Tks.

François

Consider using more specific events

Great project -- very smooth!
When using setData the 'change' event is called and when completing a stroke 'change' event is also called. Perhaps two more events can be added 'data-set' and 'stroke-added'. This would allow for a little more information.

Definitely an edge case, but I thought it would be nice. Had a little trouble using it with angular but got it sorted out eventually.

Angular Directive

Svg Stroke Color

$("#signature").jSignature({color:"#80"});
--> signature shows in lovely navy color
ajax({ff:"writeSignature",d:$("#signature").jSignature("getData","svgbase64")[1]});
-->data upload, decoded, written to svg file great, but:
...<path fill="none" stroke="#000000"...
->stroke color not navy!!!

Specified Width and height = sizing problem with jSignature

(from bug reporter)

Hi Daniel ,

Firstly i have to say awesome work about jSignature , that's cool !

Recent days , i'm working with a prototype project based on Mobile platforms and one main feature of this project is to capture user's input and
conserving it locally. ( through database).

but i found a strange thing that the parameters of width and height are not working as they should be from the API doc, the situation is :

if i don't add these two parameters ,
everything is fine , the width will automatically fit with device and it seems the height is one third of the height value. say : mine are <canvas class="jSignature" style="width: 100%; height: 317px;" width="1266" height="319"></canvas> )

but if i add the width and height parameters when initializing , no matter what the values are, the canvas turns out to be as some strange values such as :
<canvas class="jSignature" style="" width="302" height="152"></canvas>

it seems these are the default values of the canvas. but the other parameters are working fine.

It would be appreciated if you could give me some advices for this very odd behaviour.

Best regards

How to make it simple

Hello Friend, I donot need all those options. I just need the signature area and a button that will put the svg base64 code to a textarea created by me. So that i can submit the form. , Please help..

resize doesn't work when there are two or more pads

The resize mechanism doesn't work when there two or more signature pads.

<div class="jsignature-parent"></div>
<div class="jsignature-parent"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="./jSignature.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".jsignature-parent").jSignature()
    });
</script>

When I change the size of the browser window, I get the an error:
Uncaught TypeError: Cannot read property '0' of undefined on currentTopic[i][0] in this.unsubscribe (PubSubClass).

jSignature not working from the server

I created my web application and included jSignature functionality. Everything works great when run from my pc. I published the web app to the server and see the signature section when I open the webpage from my pc, but I don't see the signature section when I open the web page from another pc or from the server. It seems like I must have something installed on my pc that is not installed on the server. Can anyone help?

<div id="divSigns" data-role="fieldcontain" runat="server" style="display:none;">
        <span class="graytitle">Client Signatures</span>
        <ul data-role="listview" data-inset="true">
            <li data-role="fieldcontain">
                <div data-role="fieldcontain" id="divSignClientList">
                    <fieldset data-role="controlgroup" data-type="horizontal">
                        <legend></legend>
                        <asp:RadioButtonList ID="rdLstClients" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal" onclick=" ClearSign();" class="rdLstClients">
                            <asp:ListItem Selected="True">First Signer</asp:ListItem>
                            <asp:ListItem>Second Signer</asp:ListItem>
                            <asp:ListItem>Third Signer</asp:ListItem>
                        </asp:RadioButtonList>
                    </fieldset>
                </div>

                <div data-role="fieldcontain" id="divSignPad" runat="server">
                    <div id="signature">
                    </div>
                    <input id="hfSigBlank" name="hfSigBlank" type="hidden" runat="server" />
                    <div class="ui-grid-b">
                        <div class="ui-block-a">
                            <input type="button" id="btnSaveSign" data-theme="b" value="Save Signature" onclick="return SaveSign();" />
                        </div>
                        <div class="ui-block-c">
                        </div>
                    </div>
                </div>
            </li>
        </ul>
</div>

On other workstations and the server I don't see the block where the signature goes.

GetData

Hi,
I would like to get the data of jsinature in a form to insert in my database mysql.
Can someone help me to getdata to the mysql database ?
Thanks,
Neo

iOS7 + scrolling prevents signature

After the iOS7 update, an deployed app we've been using for a while doesn't work properly. Specifically, if the jSignature div is loaded off the bottom of the screen, requiring the user to scroll to it, you cannot sign it. You can select it and put the occasional single dot, but the browser is stuck in a "scroll" mode, and won't let you sign. I can replicate this with both Safari and Firefox on iOS7.

JSignature canvas very slow on iOS 7

I have developed a PhoneGap app which uses the jSignature plugin. The application has four divs that captures four signatures. This app worked perfectly on iOS 6 but on iOS 7 the canvas has slowed down considerably and has rendered the application unusable. Please let me know if there is any way to speed up the canvas.

Jsignature on IE10 touch mode

Hi, I'm trying to use jsignature on ie10 with touch screen, touch move events not recognized.

Any way to work only with flash canvas instead of html5 ?

Will you support Ie10 on touch screen ?

Thank's head

Shlomi

jSignature setData does not scale with the signature box

If I restore a signature using...

$sig.jSignature("setData", 'data:'+base30Signature);

The restored signature does not scale with the signature box, so if the box is smaller when I restore the signature than it originally was when I called the getData method, the signature will be clipped, if the box is larger, the signature will be too small.

Is scaling restored signatures just not implemented, or am I missing something?

importData / setData Base30

I am using jSignature to allow my clients to sign documents. I pass the signature using base30 to a MySQL database by saving the base30 value to a hidden input. From here, I needed to render the signature so it can be reviewed or edited.

What I don't understand is how to render the signature again using setData. I was thinking it would take the data from a javascript variable for the 2nd argument, but I keep getting an error that says unable import plugin "undefined". In addition, everything I have found documentation wise has not been clear how to take the base30 url formatted data and reimport it back into the canvas...

I was reading earlier, and found a lot about importData, which based on what I have read is depreciated? Not sure... Still couldn't get it to work either way.

I directly copy and paste the examples from the documentation and try to getting it working... and then I get an error saying can't call method join of undefined...

All I want to do is just import back my base30 php variable back into the canvas. How do I do this the proper way? If I can help at all by trying to get a more noob friendly tutorial or documentation written, I would love too.

I don't want anyone to hold my hand through this, but I really don't know what I am doing with my import. Thanks for the help.

Cannot call method 'resetCanvas' of undefined

Hi

Im using jSignature and have implemented it on my site, but when i tried using the reset function, i got this error :
Uncaught TypeError: Cannot call method 'resetCanvas' of undefined jSignature.min.js:1289

Can you help me with this one? Thank you.

TypeError: Cannot call method 'resetCanvas' of undefined

Hi

we use jSignature on iOS and on Android. But while everything works on iOS, the same code produces the following exception (from time to time) on Android:

TypeError: Cannot call method 'resetCanvas' of undefined
at _clearDrawingArea (jSignature.js:1304:45)
at $.fn.(anonymous function) (jSignature.js:1448:40:45)

Any help is welcome.

Regards
Christoph

Image background always black

Hello,

I'm really liking jSignature and it seems to be working on several mobile devices I need to support. I am having one issue though, I need to save the signature as a jpg image on the server side. I've been able to get the PNG and convert it to JPG but my backgroud is always black rather than white. I've tried setting the back ground on the div, in css and as an option for jSignature but the background always appears black in the final output. I even tried getting the signature directly from the canvas so it was using the same code I used with another canvas control, but still no luck. Any ideas?

Thanks in advance,
James

Update Bower.json

The bower.json incorrectly defines the main files, it should have:

"main": [
    "src/jSignature.js",
    "src/plugins/jSignature.CompressorBase30.js",
    "src/plugins/jSignature.CompressorSVG.js",
    "src/plugins/jSignature.UndoButton.js",
  ],

Importing data back into canvas

Would it be possible to import the exported data back into a jSignature object, thus making it possible to continue working on a signature/drawing (yes, I am using jSignature in a new "not-what-it-was-supposed-for" way :)

Base30 extras

It is "native" data structure compressed into a compact string representation of all vectors. Code examples (.Net, Python) detailing decompression of this format into render-able form (SVG, language-native coordinate arrays) are provided in the extras folder.

However the example is actually in PHP, not Python. 😞

Error in PubSubClass after resizing

Unable to get property '0' of undefined or null reference Stack: jSignature.js Line Number:72

After we do a window resize we occasionally get this error. This is hard to reproduce for us, but happening fairly regularly at one of our customers sites.

If you need any more information, let me know

Jquery version

is there something that can be done to allow this work with 1.10.2 jquery included in wordpress? due to another script the included jquery has to be loaded meaning the 1.8 this was working in cannot be used on the page

jSignature_Tools_Base30.php uncompress_stroke_leg() index error

Hi, I got this:
Error type: 8, in file: C:\ ... \jSignature_Tools_Base30.php, line: 107, message: Undefined index: :

I created this kludge, but I don't know the code/image format and won't presume to create a pull request. FYI.

105            } else /* alphas replacing digits */ {
106                // more parts for the new number
+++               if (array_key_exists($ch, $charmap_reverse)) {
107                  array_push( $partial, $charmap_reverse[$ch]);  
+++                }                                               
            }

Save signature on serverside ?

I'm trying to save a signature on the server side after returning a Base30 string from a mobile device via jquery mobile.

I tried using the function GetData to convert the signature to save as a PNG image, but how should i get the int[][][] to a saved image in the filesystem?
Can anyone give me a C# exampel of how to do this?

Thanks!!

GetData from jSignature.Tools
public int[][][] GetData(string data)

/// Returns a .net-specific array of arrays structure representing a single signature stroke
/// A compressed string like this one:
/// "3E13Z5Y5_1O24Z66_1O1Z3_3E2Z4"
/// representing this raw signature data:
/// [{'x':[100,101,104,99,104],'y':[50,52,56,50,44]},{'x':[50,51,48],'y':[100,102,98]}]
/// turns into this .Net-specific structure (of array or arrays of arrays)
/// [[[100,50],[1,2],[3,4],[-5,-6],[5,-6]], [[50,100],[1,2],[-3,-4]]]

alpha30 to SVG .net

Hi,
I am trying to convert the alpha30 image to SVG image using the .Net library.But the svg output has nothing to do with the import...

This is the code in Vb:
Dim p As New jSignature.Tools.Base30Converter
Dim a As New jSignature.Tools.SVGConverter

    Dim s As String = ""
    Dim im As String = "8N000111236599acdfbd885446547679bdccfgloomica63133546c8_2E657848420Z236847542100Y235568a9a872Z168cbdd7410Y2998833Z13"
    s = a.ToSVG(p.GetData(im)) 

Am I missing something?

Jsignature bootstrap modal

Jsignature doesn't work in the bootstrap 3 modal view.
Is this true?

$("#AddSignatureModal").on('show.bs.modal', function () {
$("#signature").jSignature();

    })

using the vector formats for images on IE

any chance you guys will be producing something that will convert the vector data into an usable image format that will display on IE (8+), or is there something already out there that can be used?

On mouse-up (or on touch up) event

Here comes a new idea :)

A possibility to add an event when the mouse or finger is lifted from the canvas/jSignature. For example to send a callback to a save function. So as soon as you have written your signature (or drawing or whatever) it is sent to the system and saved.

Although this is a good idea and even though when writing a signature it is possible to lift the pen/mouse/finger many times, usually if you send all the data, then the last time so lift it everything will be saved.

BUT, for bandwidth reasons maybe it would be an idea to have a counter for every mouse-up so only 1 in X does a call-back.

Another way would be for an event to trigger when leaving the jSignature area.

Unsure which way would be the best way to solve it, maybe both should be possible?

Background

Hello.
How to make jSignature works with img as background and how to export it with base64.

a make this

$("#signature").jSignature({color:"#000",lineWidth:2,width:'100%',height:'100%'});

onclick="alert($('#signature').jSignature('getData', 'base64')) - to display data but this give me undeifned
How to remove black line on canvas ?

mosueup events

The jSignature mouseup event seems to be firing for other mousseupevents on the page - not just on the jSignature element.

Transparent background

Hello, this is a suggestion which I did not find if it is possible or not, but having a transparent background would be a nice feature. Maybe already is possible via CSS?

Education on Data Structure

Can you clarify the data structure that is produce when using the native format?
Here's what I'm trying to do take the data and use it server side in java. Java has a 2d Graphics helper see below for the info:
Graphics.drawLine(int x1, int y1, int x2, int y2)
Draws a line, using the current color, between the points (x1, y1) and (x2, y2) in this graphics context's coordinate system.
Parameters:
x1 the first point's x coordinate.
y1 the first point's y coordinate.
x2 the second point's x coordinate.
y2 the second point's y coordinate.

My problem I'm trying to understand this output per the documentation below. What are you calling a stroke? In the example below would coordinates 98,23 be my x2,y2 if x1,y1 equal to 101,1? Why are there multiple stroke arrays?
* var data = [
* { // stroke starts
* x : [101, 98, 57, 43] // x points
* , y : [1, 23, 65, 87] // y points
* } // stroke ends
* , { // stroke starts
* x : [55, 56, 57, 58] // x points
* , y : [101, 97, 54, 4] // y points
* } // stroke ends
* , { // stroke consisting of just a dot
* x : [53] // x points
* , y : [151] // y points
* } // stroke ends
* ]

I guess I'm trying to do the following "If we want classical vectors later, we can always get them in backend code." but can't quite figure out where to start. "classical vectors where numbers indicated shift relative last position"

Base30 to Base64

Does anyone have a good example of how to go from Base30 to a Base64 image or regular image in PHP?

importData not working

I tried testing the importData functionality. It says that the method is not defined. Is there something i might have missed out? It gives the same error on your demo page as well. Pls clarify. The error says "method importData does not exist on jQuery.jSignature"

Thanks,
hari

Removing signature line

I would like to be able to remove the signature line. I need to use the noConflict version.

Since there is no "pretty" version of the noConflict jSignature script, I can't manually make the changes to the file.

Is it possible to make the non-minified noConflict script available?

extraneous shadows and lines in IE10

In IE10 we are experiencing extraneous shadows and lines around the signature. They do not appear in any other browser we have used. I have pasted an image to this post from your own demo. We are concerned these lines and shadows will discredit a signature in a legal document. Will you be able to clean them up?

screenshot from 2013-11-18 10 34 20

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.