Added png image and signature line options

[shrimpwagon]

Added options for outputting .png - not applicable to svg, base30, etc. I figured these are needed additions since a large signature div is helpful but outputting the .png at the same size is not. I added options to set the width and/or height, scale width/or height, proportion lock and edge trim. It can trim off the excess white space!!! Also, added new init option to leave off the signature since this appears in the .png. I just substituted the line with some HTML/CSS. I'm sure yall can figure that one out.

Observe the new options:

Scale picture by 1/2 and trim off white space:

$('#signature').jSignature('getData', 'image', {
    'scaleX': .5,
    'trim': true
});

Set the width to 200px and do not proportionally resize height:

$('#signature').jSignature('getData', 'image', {
    'width': '200px',
    'lock': false
});

Mixing the 'width' and 'height' options with 'scaleX' and 'scaleY' options will be confusing and I don't recommend it. Basically, the width and height gets established first before scaling. So specifying 'width' will result in the image being resized at that width but if you also indicate 'scaleX' then it will be scaled AFTER being resized. Just don't do it!!!

Options

Options     Default     Description
-----------------------------------------------------------
width       'canvas.width'  Sets the png width
                        (takes precedence before scaleX)

height      'canvas.height' Sets the png height
                        (takes precedence before scaleY)

scaleX      1           Sets the png width by multiplying
                        current width. If 'width' is also
                        set, that value gets scaled.

scaleY      1           Sets the png height by multiplying
                        current height. If 'height' is also
                        set, that value gets scaled.

trim        false       Trims off any clear edge pixel, ie
                        if RGBA is 0,0,0,0, ie no color.
                        Occurs after sizing/scaling.

lock        true        Set the correct proportion for other
                        dimension if not given. By setting
                        a value for 'width', 'height' will
                        set set proportionally. This also
                        works for 'scaleX' and 'scaleY'

Here is how to remove the signature line:

$('#signature').jSignature({
    'signatureLine': false
});

[dvdotsenko]

@shrimpwagon

My apologies. It is apparent that I used language that could have been interpreted (wrongly) as me "hating" PNGs. I love PNGs and can definitely see a place for them. I marvel at the proposed changes and the cleverness of the proposed settings API.

The sentiment I shared was just a top of the iceberg. It's my statement of belief, but there are also simple, non-sentimental reasons for my kind offer to help you get your code into a plugin: maintenance cost.

jSignature is turning into a very large project. It serves multiple niches. I am honored to be a contributor to jSignature and feel the burden of responsibility of making this project a good fit for most users.

In order to keep code manageable it needs to be modular, compartmentalized. It helps me, among others, to keep sanity while maintaining it. It helps keep others tune jSignature to their needs. My precious SVG renderer is a plugin. My precious "Undo Button" and other things I find essential to our corporate use are plugins. I hope to instill the wisdom of this approach to others.

You would greatly help jSignature community if your, really worthy code becomes a plugin. My sincere offer to help/collaborate is still firm. Give it a spin. Let me know when I can pick up the scraps.

Daniel.

[sgmckenna]

this scaling feature is super useful and saved my life. thanks so much. please make it part of the master regardless of how its implemented.