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 doesn't work in the bootstrap 3 modal view.
Is this true?

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

    })

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?

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 :)

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

Would you be so kind?

The signature canvas has wrong size when the jSignature is called on a non visible tab.

http://jsfiddle.net/gD8QC/

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).

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.

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

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. 😞

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

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.

In my mobile Jsignature getdata is working fine and also gives base64 value. but the same code in tablet gives Null value.please help on this issue

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?

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]);  
+++                }                                               
            }

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

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",
  ],

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.

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

$("#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!!!

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?

(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

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.

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"

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?

Which I find quite strange. You would expect IE9 to have support for the canvas element.

Is there a workaround for this?

Hello Brinley, long time no hear :)

I have tried the jSignature now on an Ipad and found that when for example drawing a signature, or anything really the canvas is not always that fast. A quick search on the net got me to this page:
http://29a.ch/2011/5/27/fast-html5-canvas-on-iphone-mobile-safari-performance

Could that be something to implement into jSignature for it to be more responsive to penstrokes?

/Kristian

Hello, here's another suggestion:

Add a final dot when releasing the mousebutton, to be able to make "dots".

For reference or info see how they solved it in DrawBox:
https://github.com/crowdsavings/jquery.drawbox

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

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]]]

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?

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?

What do you think?

willowsystems#9

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

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 ?

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

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.

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

Examples provided in the jsignature , i am trying the same which is working in IE9 but not the IE7/8. However I noticed that demo pages http://willowsystems.github.com/jSignature/#/demo/ works for IE7/8/9.

I am new to FlashCanvas.

I need to get the signature working in IE7/8. Any help on this is highly appreciated.

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.

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

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

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

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

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?

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 .

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 ?

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.

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