Code Monkey home page Code Monkey logo

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

jsignature's Issues

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 bootstrap modal

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

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

    })

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?

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

mosueup events

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

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

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.

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

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

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

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.

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?

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

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

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

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

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

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

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

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.

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"

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?

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

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

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?

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?

Base30 to Base64

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

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 ?

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

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.

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

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

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

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

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

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?

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 .

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 ?

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.

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

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.