Git Product home page Git Product logo

jsignature's People

Contributors

brinley avatar dvdotsenko avatar gaspowers avatar krazyjakee 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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jsignature's Issues

Would like to save data with canvas dimension - OR - make Undo work with canvas initialised with data

Hi - love your work with this script, many thanks, would happily pay for license if you took it commercial.

I am using jSignature in an online charting application. The canvas is loaded 600x700px, and users can draw anywhere on the canvas.

When loading jSignature output after saving (I am storing as data, not images as you recommend) the output, as you intend, does not store the canvas size, ie. x : [0] , y : [0] of input will be relative to the boundary of the saved input extent, not the actual original canvas.

I can hack jSignature to load with with a single point around line 970 as I have mentioned in a post elsewhere on this project, as such:

// setting up new dataEngine
data = [ { x : [0] , y : [0] } ]

and by adding this single pixel on creation, this then sets the relative position of all subsequent input, and I can then load the output correctly into a 600x700px div as it was drawn, with all input position absolutely on the canvas as it was entered, regardless of where on the canvas input was made.

This is all great - ! Works like a dream.

However, this hack breaks the Undo script, as a single click on the Undo button will remove all input, rather than sequentially by stroke as intended.

Is there a way to either make the Undo script co-exist successfully with this hack to load jSignature with a single positioning pixel - or can jSignature be modified to accept some canvas data that can assist this type of accurate absolute positioning of input as per canvas?

I think jSignature is an immensely useful tool, and this would extend the script to effectively work in scenarios beyond just signature input recording. I ran into a Danish researcher on a holiday recently in Italy, and he was most interested in jSig's application in being able to record subjects' tracing a pathway through a maze in one of his studies, for example (Porteus Maze Test, I think - http://en.wikipedia.org/wiki/Porteus_Maze_Test). They are currently using paper records, and the opportunity to be able to use tablet input to replace this system, with all records stored digitally and accessible instantly, piqued his interest somewhat, to say the least. This is a good example of a similar application to the one I have developed that would benefit from absolute positioning on canvas of any input.

Many thanks for your time

David

How to draw signature on image instead of plain canvas?

Hi guys!!

I have successfully loaded an image on existing canvas. I could draw signature on it.
I can also generate base64 string of final image. (Image with default loaded jpeg/png image on canvas + signature drawn over it.) But when I resize my browser or click reset, the loaded image get disappears. Can we prevent this?

It would be grateful, if anyone could help me out.

Signature not displaying on Samsung Galaxy S4

When trying to sign in the content div using the Samsung Galaxy S4 the line is not displaying. The signature is there when I pull the data but is for some reason not displaying. Any ideas why this might be? I saw there was a similar issue posted by someone about this happening on the iPad, but I wanted to add another issue just in case this is device specific.

jSignature not working with pageslider

Hello all,

I am using jSignature in my app.

I am using pageslider jquery.

jSignature is working fine for the first time, but when the page slides and if I again goes to the signature page, I am not able to draw on the canvas.

Could anyone help me with this issue.

Any help would be appreciated.

Uncaught TypeError: Cannot call method 'split' of undefined

Hello!
I'm not able to use multiple signpads on the same page with error message:
Uncaught TypeError: Cannot call method 'split' of undefined
The first signpad is shown correctly, the other ones are not intialized.

This error only occurs, if the signpad will be empty. If I sign the first signpad and save the form, the first two signpads are displayed correctly, the third not. If I save the form again with two signes pads, all three signpads are displayed correctly.

The Javascript:

var signatureUser = 'data:{object.signatureUser}'; // {object.signatureUser} will be filled with data by the templating engine
var signatureTenant = 'data:{object.signatureTenant}';
var signatureNewTenant = 'data:{object.signatureNewTenant}';

$(document).ready(function() {

    $('#signatureUser + .well').jSignature({
        'decor-color': 'transparent'
    });
    $('#signatureUser + .well').jSignature(
        'importData', signatureUser
    );

    $('#signatureTenant + .well').jSignature({
        'decor-color': 'transparent'
    });
    $('#signatureTenant + .well').jSignature(
        'importData', signatureTenant
    );

    $('#signatureNewTenant + .well').jSignature({
        'decor-color': 'transparent'
    });
    $('#signatureNewTenant + .well').jSignature(
        'importData', signatureNewTenant
    );

});

$('#signatureUser + .well').bind('change', function() {
    var signature = $(this).jSignature('getData', 'base30');
    $('#signatureUser').val(signature);
});

$('#signatureTenant + .well').bind('change', function() {
    var signature = $(this).jSignature('getData', 'base30');
    $('#signatureTenant').val(signature);
});

$('#signatureNewTenant + .well').bind('change', function() {
    var signature = $(this).jSignature('getData', 'base30');
    $('#signatureNewTenant').val(signature);
});

function signatureReset(signature) {
    $('#' + signature + ' + .well').jSignature('reset');
}

function signatureRefresh(signature) {
    switch (signature) {
        case 'signatureUser':
            data = signatureUser;
            break;
        case 'signatureTenant':
            data = signatureTenant;
            break;
        case 'signatureNewTenant':
            data = signatureNewTenant;
            break;
    }

    $('#' + signature + ' + .well').jSignature(
            'importData', data
    );
}

SignatureDataConversion_dotNet help

Hello,
I need some clarification about .net method to convert jsignature exported data.
I have an app sending base30 compressed data (for example "quaok1C2S3Q3W3A2A2I1Uk1y800Z6c1y1y1W2G2w2C2u1O1M1wie800Y2ccm1A1C1Q1S1U2G2y2M1O1u1y4424681y1C1Q2M2Q2w2A2woce_dC200Z2688408ccoeiamiga800000Y48gic1u1ucmaes866402000Z224420000000000002")
and a .Net web service receving data in order to save them to database and do some business.
At the moment I'm experimenting some problem in converting data from base 30 to image.
As example, I'm referring to the SignatureDataConversion_dotNet code in the "extras" folder of the jsignature zip in order to do the conversion and manage data.
But something is not working for me...or, maybe, I've not understood how to manage base30 signature in .Net

This is a piece of the code I'm using:

Base30Converter conv = new Base30Converter();
int[][][] bytearray = conv.GetData(base30_string_from_app);
string actual = jSignature.Tools.SVGConverter.ToSVG(bytearray);
var byteArray = Encoding.ASCII.GetBytes(actual);
using (var stream = new MemoryStream(byteArray))
{
var svgDocument = SvgDocument.Open(stream);
var bitmap = svgDocument.Draw();
bitmap.Save("D:\prova.png", ImageFormat.Png);
}

But the image I get is a "partion" of the whole signature sent, with only some strokes.
I've also checked the string I am manipulating: it is the same of what the app is sending.
As confirmation of this I succed in importing it on a html canvas, using jSignature "setData" method.

Thanks in advance for any help

I can only draw points, not lines in Chrome

The signature area doesn't seem to allow moving the cursor. It will only add a point if you click and release immediately. This is in Chrome 39, works fine in Firefox. Any ideas on how I can debug this?
screenshot 2014-12-04 16 33 31

Canvas not signable

When using jSignature I am finding on rare occasions (twice within 2 months) that the canvas becomes unable to accept a signature. Physically touching the canvas appears to do nothing, yet the page is still moveable and other buttons etc within the page work.

This is doesn't seem hardware related, it has happened on a iPad 2 and a iPad mini.

Also it may be worth noting jSignature is being used alongside phonegap and jquery/jquery mobile.

Has any one else seen this or is this a known bug?

Thank you in advance.

I added JPEG support :)

FIRST, I reference jpeg encoder library:
https://github.com/owencm/javascript-jpeg-encoder/blob/master/jpeg_encoder_basic.js

SECOND: I alter your code around the export plugins

I'm sure there is a cleaner way to do this but maybe you might consider adding jpeg support to your wonderful library
cheers

    var exportplugins = {
        'defaultold':function(data){return this.toDataURL()}
        , 'default': function(data){
                return new JPEGEncoder().encode(
                    this.getContext("2d")
                        .getImageData(0, 0, this.width, this.height),
                        10
                );
        }

jSignature scrolls on ipad

I have jSignature implemented in my application. It works fine in Firefox and Chrome. When I try to use it on an iPad, instead of the strokes in the window being registered as signature lines, they are registered by the browser as dragging/scrolling events that move the page up and down.

Is there something I have to change/detect on my page to enable support for iPad (Safari) devices?

Thanks
Alex.

Need Help

Real new to all html stuff. Wrote a C# webserver that serves very simple page for a few text inputs of data and need signature on form loaded demo but get error object doesn't support jsignature. No clue how to troubleshoot. Libs seems to load ok as no script errors in IE9 except the not support error. I had to add a / in front of libs to get the intial error about libs to go away now just get the object not support jsignature error.
Thanks for any help Doug

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
<!--[if lt IE 9]>
<script type="text/javascript" src="libs/flashcanvas.js"></script>
<![endif]-->
<script src="/libs/jSignature.min.js"></script>

<!--<script>
    $(document).ready(function() {
        $("#signature").jSignature()
    })
</script>-->
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){PageReady();}); var pageVersion = 0; function PageReady() { PollForData(); $("#signature").jSignature(); } function PollForData() { $.ajax ({ url: "{URL}Poll" + pageVersion, cache: false, success: function(data){if (data > "") {UpdateForm(data);} setTimeout(PollForData,1000)}, dataType: "text", error: function(xhr, ajaxOptions, thrownError){document.getElementById("formlines").innerHTML=thrownError;}, timeout: 30000 }); } function UpdateForm(data) { if (data.indexOf("|") > 0) { pageVersion = data.substr(0,data.indexOf("|")); } data = data.substr(data.indexOf("|")+1,data.length-(data.indexOf("|")+1)); document.getElementById("formlines").innerHTML=data; } function SetTextBoxValue() { document.getElementById('TextBox').value = document.getElementById('ListBox').value; document.getElementById('TextBox').focus(); } function SetFocus() { document.getElementById('TextBox').focus(); } function SetImageEncoding() { document.getElementById('formlines').encoding="multipart/form-data"; } function SetTextEncoding() { document.getElementById('formlines').encoding="text/html"; } </script>

Unattended

{FORMLINES}

error in chrome when using setData

Hi

Thanks for the amazing plugin, but i get the following error in chrome when calling setData:

Uncaught Error: jSignature is unable to find import plugin with for format 'image/svg+xml;base64'

This is the code I have been using, all works, except setData

$(".signature").jSignature();
$(".signature").after('
Undo Signature
');
var sig = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iNTcwIiBoZWlnaHQ9IjEyNyI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTSAxIDExMyBjIDAuNDYgLTAuMDkgMTcuMDUgLTMuODIgMjYgLTUgYyAyNC44MyAtMy4yNiA0OC4xNiAtNC41MSA3MyAtOCBjIDE2LjUyIC0yLjMyIDMxLjk0IC01LjIzIDQ4IC05IGMgMTEuMzQgLTIuNjYgMjEuOTIgLTYuMzEgMzMgLTEwIGMgNC4xOCAtMS4zOSA4LjAyIC0zLjA4IDEyIC01IGMgNS44OSAtMi44NCAxMS42MyAtNS43MyAxNyAtOSBjIDIuMTggLTEuMzMgNC4xNiAtMy4xNiA2IC01IGMgMi44NCAtMi44NCA1LjY1IC01Ljk0IDggLTkgYyAwLjg3IC0xLjE0IDEuODkgLTIuNzMgMiAtNCBjIDAuMTkgLTIuMjkgLTAuMTIgLTUuNzkgLTEgLTggYyAtMC45NCAtMi4zNSAtMy4wMiAtNS4wMiAtNSAtNyBjIC01Ljg3IC01Ljg3IC0xMi4yMiAtMTIuNTMgLTE5IC0xNyBjIC03LjM4IC00Ljg2IC0xNi42MSAtOS41NiAtMjUgLTEyIGMgLTkuMTUgLTIuNjYgLTE5LjkgLTMuMDYgLTMwIC00IGMgLTQuMzQgLTAuNCAtOC43NiAtMC40NSAtMTMgMCBjIC00Ljk5IDAuNTMgLTEwLjUyIDEuMTQgLTE1IDMgYyAtOC42NSAzLjU4IC0xNy45MiA4LjY4IC0yNiAxNCBjIC02LjQxIDQuMjIgLTEyLjQ1IDkuNjYgLTE4IDE1IGMgLTMuMzcgMy4yNCAtNi40NiA3LjMgLTkgMTEgYyAtMC45NiAxLjQgLTEuODYgMy4zNSAtMiA1IGMgLTAuNDggNS41MiAtMC40NSAxMi4yMSAwIDE4IGMgMC4yIDIuNjUgMSA1LjQ2IDIgOCBjIDMuMzEgOC40MSA2Ljc1IDE3LjA4IDExIDI1IGMgMy4wMiA1LjYzIDcuMDUgMTEuMTggMTEgMTYgYyAxLjg3IDIuMjkgNC41MiA0LjQ1IDcgNiBjIDIuNjUgMS42NiA2LjAzIDMuNjUgOSA0IGMgNy41MyAwLjg5IDE2Ljc2IDAuNTkgMjUgMCBjIDUuNjkgLTAuNDEgMTEuNCAtMS41NiAxNyAtMyBjIDcuNDkgLTEuOTIgMTQuNTUgLTQuMjcgMjIgLTcgYyAyMy40OSAtOC42MSA0NC43NCAtMTYuNTggNjggLTI2IGMgMTYuNzQgLTYuNzggMzEuNTYgLTE0LjE1IDQ4IC0yMSBjIDMuOTcgLTEuNjUgNy45IC0zLjAxIDEyIC00IGMgNS42IC0xLjM1IDExLjMxIC0yLjU3IDE3IC0zIGMgNy41OCAtMC41NyAyMy40IC0wLjA0IDIzIDAgYyAtMC41NyAwLjA2IC0yMi40IC0wLjQ0IC0zMyAxIGMgLTguNjUgMS4xNyAtMTYuOTcgNC45IC0yNiA3IGMgLTIwLjYgNC43OSAtNDEuNjcgOC4yOCAtNjAgMTMgYyAtMi4xNSAwLjU1IC00LjM0IDIuNTUgLTYgNCBjIC0wLjgzIDAuNzMgLTIuMzIgMi4zNiAtMiAzIGMgMC44NyAxLjc0IDQuNDIgNS43MSA3IDcgYyA0LjA1IDIuMDIgOS44OCAzLjA2IDE1IDQgYyA3LjY1IDEuNDEgMTUuMjIgMi43MyAyMyAzIGMgMjEuOCAwLjc0IDQyLjcyIDAuNDYgNjUgMCBjIDEwLjY1IC0wLjIyIDIwLjk2IC0wLjA2IDMxIC0yIGMgMjAuNjkgLTQgNDAuODMgLTEwLjg1IDYyIC0xNiBjIDQuMDIgLTAuOTggNy45MiAtMS42MyAxMiAtMiBjIDcuMDUgLTAuNjQgMTYuMDcgLTEuNDMgMjEgLTEgYyAwLjg0IDAuMDcgMS44NiAxLjk4IDIgMyBjIDAuNDUgMy4zOCAtMC4yNCA4LjE0IDAgMTIgYyAwLjA4IDEuMzMgMC4yMSAzLjc0IDEgNCBjIDIuMTEgMC43IDcuNDUgMC41MiAxMSAwIGMgNy42IC0xLjEyIDE2Ljk2IC0yLjUgMjMgLTUgYyAyLjM3IC0wLjk4IDQuNzEgLTQuNTcgNiAtNyBjIDEuMTYgLTIuMTcgMS43NyAtNS4zNSAyIC04IGMgMC40MiAtNC44MiAwLjQ3IC0xMC41NSAwIC0xNSBjIC0wLjE0IC0xLjMzIC0wLjk5IC0zLjc2IC0yIC00IGMgLTQuMyAtMS4wMiAtMTIuNDUgLTAuODMgLTE5IC0xIGMgLTYuODggLTAuMTggLTEzLjM3IC0wLjI1IC0yMCAwIGMgLTIuMDIgMC4wOCAtNC41OSAwLjIyIC02IDEgYyAtMS4xNiAwLjY0IC0yLjU2IDIuNjggLTMgNCBjIC0wLjQ0IDEuMzIgLTAuNzEgMy45IDAgNSBjIDEuODEgMi44MSA1LjcyIDYuODYgOSA5IGMgMy45MiAyLjU2IDkuMTIgNC4yNyAxNCA2IGMgMTEuNDQgNC4wNSAyMi43NyA4LjAxIDM0IDExIGMgMy40NyAwLjkzIDcuNzYgLTAuMDQgMTEgMSBjIDQuNiAxLjQ3IDkuMTggNC45NiAxNCA3IGMgMy44OSAxLjY1IDcuODYgMi43NiAxMiA0IGMgMi43IDAuODEgNS4yOSAxLjU3IDggMiBjIDMuNjMgMC41NyA3LjI1IDAuODcgMTEgMSBsIDE3IDAiLz48L3N2Zz4=";
$(".signature").jSignature("setData", sig);
$(".signature").bind('change', function (e) {
var datapair = $(this).jSignature("getData", "svgbase64");
console.log(datapair);
$(".sigvalue").text(datapair);
});

I have had a look at the plugins folder and there seems to be no import, I am using the latest jquery.min version of your solution

Thanks

Dave

Decompression of base30

Hello, I am trying to convert base30 string to default base64 for the jsignature.
I need a function that would do that either in java or javascript.
Something like this;

Public void Convert(String base30data){
//the script that convert it back to default base64png…
return response;
}

Can someone help me with this ?
Thanks in advance.

Option to use as display-only (read-only mode)

Would be nice to have an option to disable user entry and use the plugin for displaying signatures only, without having to generate an image and use that in place of the signature area.

Demo doesn't work on IE 8

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; BRI/1; InfoPath.3; .NET4.0C; MS-RTC LM 8; BRI/2; MALC)
Timestamp: Wed, 15 Aug 2012 01:58:28 UTC

Message: Unexpected call to method or property access.
Line: 28
Char: 6
Code: 0
URI: http://willowsystems.github.com/jSignature/

Message: Unexpected call to method or property access.
Line: 275
Char: 4
Code: 0
URI: http://willowsystems.github.com/jSignature/

Signature box sometimes shrink in Chrome

Sometimes the signature pad shrinks. Please look at both the images with error and when it appears correctly.
correct_chrome
error_chrome

Notice that signature line moves upwards. Hence not able to write anything.

Page moves on latest Mobile Firefox (v30) when writing signature

Hi,

It's extremely hard to write your own signature as the page constantly moves on the latest mobile Firefox (v30). I haven't experienced such issue in any other browser just Firefox and it's making it near to impossible to draw signatures.

Thank you very much for your help.

No Signature on Sony Xperia Z

We're having a issue on Sony Xperia Z devices running android 4.2.2. The strokes of the signature are not visible. The signiture is being captured as we get the signature data exported as a SVG ok, we just don't see any signature lines on the screen.

It's working on other android device running 4.2.2, 4.1.2 and lower so I doest look like an android version issue. We've tried this on multiple Sony Xperia Z mobiles and they all have the issue. Could this be something with the Sony's Xperia user interface?

Has only one else come across this issue and have a workarounnd?

jSignature + asp.net Best Practice?

Is there a "best" way to getData() from the client to the server in asp.net. I've seen references to using json or putting data in a hidden field. I'd like to use a tried and true method instead of reinventing it myself.

Cheers,
Jeff

jSignature not dynamically resizing

I am writing a jQuery Mobile app that contains a multi page form in order to give the signature field a page to itself. I am having a problem trying to get the canvas to take up the full screen based on the device width and height. I need the canvas to resize dynamically so it will fill up the screen for all devices in both their portrait and landscape layouts.

Thank you.

Base30 Python

The readme states there is a Python example for managing the base30 format but I only see .NET and PHP...

Not working in some versions of IE 8

It works fine will all major browsers even with IE 7,8. As I have included

However, it is not working in default IE 8 in Windows XP i.e. version 8.0.6001
Signature Pad is not appearing.

Signature cut-off when loading on smaller canvas (base30)

Signatures saved on larger canvases in base30 are cut off when loaded again on smaller canvases. Likewise signatures saved on smaller canvases only take up the top right corner of larger canvases. Is there a way to getData, setData which will resize the signature correctly based on the canvas size? I notice when the browser is resized with the signature loaded, the signature will resize to fit the canvas.

Undo button is off-center on Chrome on Windows XP

Minor stylistic issue, the undo button appears slightly to the left of center below my canvas.
Could I create the undo button and then pass an id to the plugin instead?

Thanks for a great plugin!
SSF

Making CSS Customizable

Write now for most of the sizing CSS and such it is all in the .js. I would like control over this and the ability to customize to my liking. If the CSS could be an external file and removed from being handled by the .js that would be awesome!

Background Image?

I saw mention of setting the background colour for the canvas in the source code but didn't see any mention of background image. Does anybody know of a way to essentially stamp an existing image with a signature and export the stamped image as you normally would?

Re-initialize Signature Pad

Hello

I have two separate signature pads on my application. I've noticed if I sign the first one, then the second one and then go back to first one again the signature will not re-size correctly when screen size change due to change in orientation of device. As a work around is there a way of reinitialize the signature pad to correct this?

Thanks

Help needed with jsignature formats in Android

Hi,

I have this issue with Android:

I have a signature and I need to save it to database. I'm using format data:image/svg+xml;base64 and I save the signature with success!
My goal is, try to load the saved signature to an image control. Something like img.src="data:image/svg+xml;base64,xxxxxxxx......"
I can load the signature to an image, with this format, with success in various platforms.
But when I try the same on Android the signature is not loading in this format.

So my question is: is there a way to convert from data:image/svg+xml;base64 to data:image/png?

Thank you

Not working in IE11 on Windows 8.1 TOUCH

Thanks for a great script. I'm very grateful.

I tested your demo page on Windows 8.1 using IE11. It works fine with the mouse, but it doesn't work with touch (finger). Instead of drawing a line, as expected, it simply moves the signature capture area up and down. I can't see any reason why it would do that.

I tried a really simple, stripped-down example (no plug-ins, etc), and it didn't seem to make any difference.

I didn't test it in any other browsers on that machine.

I know not everyone has a win8 tablet, so it would be hard to test this, but I just thought I'd let you know anyway.

Thanks again,

Mark.

Save canvas white space...

I am using an image for my customers to sign which is a PNG of the entire form. I have made the signature area the entire height and width of the form (allows them to sign or initial anywhere on the page). When I save the sig SVG file and convert it to PNG, it loses top and left position - I am assuming it resets the coordinates based on the topmost and left most pixels plus a margin.

The end result I am shooting for is to merge the image file produced from the SVG output with the background image, thus producing a signed/initialed PDF as the final output.

My problem is that the spaces around the top and left are not retained so I cannot line the original position up with the underlying form.

How can I save the SVG file so that it keeps the relative top and left starting position - even if there is no stroke at coordinate 1,1?

Any help is appreciated...

Will jSignature work with a signature pad device connected to a PC?

Did not find any information that covers this topic. Mousing is not that easy to use for signature. Having it work with a signature pad would make it a whole lot easier (when working with an iPad). If this did work it would expand the list of device configurations where this code could be used.

IE Problems

I cannot get the signature element to show up on IE in any version. I have followed directions thoroughly. Works great in FF, Safari, Chrome. Not IE. Any suggestions?

how to stop it

how do you stop or unbind the touching area.. like when you hit the confirm button it will stop letting the drawings to be continue.

How can I load sig data out of a database and display in on the HTML page

Sorry, your example doesn't seem to get me there.

I have this working - the signature was previously saved using:

$('.sig-save').click(function(e) {
e.preventDefault();
datapair = $sigdiv.jSignature("getData","base30");
$('#member_privacy_signature').val(datapair);
$('#zoo_visitor_form').submit();
});

And the below is what is loaded on the page after the save. So, the base30 signature data is loaded into hidden form field "member_privasy_signature":

I just want to grab that value from the hidden for field and have the signature rendered back into #signature using JS or JQ.

Signature Not Visible on Galaxy Devices using Chrome as browser

The signature does not render (although it is being captured) on Galaxy devices (tablets, phones, etc) running Chrome as the browser.

To replicate... visit the following demo page from willow using a galaxy device and Chrome browser.

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

Attempting to sign will not produce anything visible (other than a little start dot) -- but if you change the export as drop down to SVG you will see that the signature is being captured. This only seems to happen in Chrome -- that is, the issue does not occur when using firefox, opera or native android browser on the same device.

Wrong cordinates in Opera mobile

Hi people,
I Just found a bug with Opera mobile when scrolling is necessary to reach the canvas.

The getPointFromEvent function is using firstEvent.pageY to calculate the point but It should be using firstEvent.clientY instead. This is happening only with Opera Mobile.

My quick fix was:

//this is a hack due to Opera Mobile wrong coordinate in pageY
//if it is Opera use clientY instead
var page_Y = (navigator.userAgent.search('Opera Mobi')) ? firstEvent.clientY :  firstEvent.pageY;

return new Point(
    Math.round(firstEvent.pageX + shiftX)
    , Math.round(page_Y + shiftY) + jSignatureInstance.fatFingerCompensation
)

Thanks for the plugin, it's great!
Bema

Add function to check for signature

Request for feature to simply check to see if anything has been "draw" in on the signature box at all. Something simple to see if it is still blank or not.

Thank you.

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.