如何从jSignature插件中的CANVAS中删除灰色线？

Question

How to remove grey color line from CANVAS (Signature panel) in the jSignature plugin ?

Is there any option to validate whether user enter signature or not ? Any built in function for this ?

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

Answer 1

How about this setting the decor-color to transparent

$(document).ready(function() {
        $("#signature").jSignature({
            'background-color': 'transparent',
            'decor-color': 'transparent',
        });
    });

Answer 2

I am afraid there is no option to turn it off, so the only solution would be to change the plug-in code itself

There is a section in the plug-in that draws the base line. Just comment out like this

// signature line
ctx.strokeStyle = settings['decor-color']
ctx.shadowOffsetX = 0
ctx.shadowOffsetY = 0
var lineoffset = Math.round( ch / 5 )
//basicLine(ctx, lineoffset * 1.5, ch - lineoffset, cw - (lineoffset * 1.5), ch - lineoffset)
ctx.strokeStyle = settings.color

Answer 3

If you are using jSignature v2 (Version 2),

c.lineTo(l, i); - comment this line to remove the grey line in the canvas.

Below code works

r.prototype.resetCanvas = function (b) {
    var a = this.canvas,
        d = this.settings,
        c = this.canvasContext,
        f = this.isCanvasEmulator,

        .........................

        c.shadowOffsetY = 0;
    var h = Math.round(i / 5),
        p = 1.5 * h,
        k = i - h,
        l = l - 1.5 * h,
        i = i - h;
    c.beginPath();
    c.moveTo(p, k);
    //c.lineTo(l, i); // comment this line to remove the grey line in the canvas.
    c.stroke();
    c.strokeStyle = d.color;
    f || (c.shadowColor = c.strokeStyle, c.shadowOffsetX = 0.5 * c.lineWidth, c.shadowOffsetY = -0.6 * c.lineWidth, c.shadowBlur = 0);

    ..........................
};

Answer 4

I made the following changes to jSignature in my project:

showLine: true, //added showLine in default options

c.showLine = d.showLine; 
if(c.showLine){
  c.lineTo(l, i); 
}

Then I pass true or false when I do

$('#signature').jSignature({ color: "#00f", lineWidth: 3, showLine: false });

Now I have the option to show it or hide it.

Answer 5

This is probably too late but hope it helps someone else stumbling on this. I've added some code to disable the grey line if you pass decor-color as null when initialising it. I prefer this approach then to add another attribute to enable/disable the signature line.

   // signature line
-  ctx.strokeStyle = settings['decor-color'];
-  ctx.shadowOffsetX = 0;
-  ctx.shadowOffsetY = 0;
-  var lineoffset = Math.round( ch / 5 );
-  basicLine(ctx, lineoffset * 1.5, ch - lineoffset, cw - (lineoffset * 1.5), ch - lineoffset);
+  if (null != settings['decor-color']) {
+    ctx.strokeStyle = settings['decor-color'];
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
+    var lineoffset = Math.round( ch / 5 );
+    basicLine(ctx, lineoffset * 1.5, ch - lineoffset, cw - (lineoffset * 1.5), ch - lineoffset);
+  }

   ctx.strokeStyle = settings.color;

It is in my git repo at https://github.com/brinley/jSignature

Answer 6

I know the question is 1 year and a half old but as today there is a better solution. Hope this will help some other people searching for a way to save the image and remove the gray line from jSignature extraordinary plugin.

The better approach here: http://www.reloadedpc.com/php/jquery-jsignature-php-base30-image/

<?php
// Load jSignature library to con
require_once(dirname(__FILE__) . '/jSignature_Tools_Base30.php');

// Get signature string from _POST or _GET
$data = $_GET['signature'];
$data = str_replace('image/jsignature;base30,', '', $data);

// Create jSignature object
$signature = new jSignature_Tools_Base30();

// Decode base30 format
$a = $signature->Base64ToNative($data);

// Create a image            
$im = imagecreatetruecolor(1295, 328);

// Save transparency for PNG
imagesavealpha($im, true);

// Fill background with transparency
$trans_colour = imagecolorallocatealpha($im, 0, 0, 0, 127);
imagefill($im, 0, 0, $trans_colour);

// Set pen thickness
imagesetthickness($im, 5);

// Set pen color to blue            
$blue = imagecolorallocate($im, 0, 0, 255);

// Loop through array pairs from each signature word
for ($i = 0; $i < count($a); $i++)
{
    // Loop through each pair in a word
    for ($j = 0; $j < count($a[$i]['x']); $j++)
    {
         // Make sure we are not on the last coordinate in the array
         if ( ! isset($a[$i]['x'][$j]) or ! isset($a[$i]['x'][$j+1])) break;
              // Draw the line for the coordinate pair
              imageline($im, $a[$i]['x'][$j], $a[$i]['y'][$j], $a[$i]['x'][$j+1], $a[$i]['y'][$j+1], $blue);
         }
    }

// Save image to a folder       
$filename = dirname(__FILE__) . '/signature.png'; // Make folder path is writeable
imagepng($im, $filename); // Removing $filename will output to browser instead of saving
echo $filename;
// Clean up
//imagedestroy($im);

?>

As the author said:

"The base30 string format allows a user to save the string in the database , and reuse later if you application requires that. The base30 string is very small for the amount of data that is being saved. Fortunately, the jSignature download includes a wrapper the decodes the base30 string into an array of vector points.

Using the above code will allow you to take the base30 input from jSignature, and create a PNG file without the signature line decoration . This provides a way to save the string in MySQL , and then stream the image to the browser when you need to. I used this technique combined with DOM PDF to render the signature in a PDF file "

I mean, what you want more than that? No imagick or batik or changing the jSignature core code. Just perfect solution! Many thanks to ReloadedPC

Edit: the only problem with this approach is that is not working for iOS. You have to use base64. The idea is the same.

Answer 7

Author does have provided option to remove grey line but seems the code is not checked-in. Visit to this location https://github.com/willowsystems/jSignature/pull/17/files and look for 'Files Changed' tab.

Under the tab- you'll find deleted lines with pink background and (-) minus sign and added lines with green background and (+) plus sign. You need to change the source by yourself. Something like this

    // signature line
    //ctx.strokeStyle = settings['decor-color']
    //ctx.shadowOffsetX = 0
    //ctx.shadowOffsetY = 0
    //var lineoffset = Math.round(ch / 5)
    //basicLine(ctx, lineoffset * 1.5, ch - lineoffset, cw - (lineoffset * 1.5), ch - lineoffset)
    //ctx.strokeStyle = settings.color


    //if (!isCanvasEmulator) {
    //    ctx.shadowColor = ctx.strokeStyle
    //    ctx.shadowOffsetX = ctx.lineWidth * 0.5
    //    ctx.shadowOffsetY = ctx.lineWidth * -0.6
    //    ctx.shadowBlur = 0


    if (settings.signatureLine) {
        ctx.strokeStyle = settings['decor-color']
        ctx.shadowOffsetX = 0
        ctx.shadowOffsetY = 0
        var lineoffset = Math.round(ch / 5)
        basicLine(ctx, lineoffset * 1.5, ch - lineoffset, cw - (lineoffset * 1.5), ch - lineoffset)
        ctx.strokeStyle = settings.color

        if (!isCanvasEmulator) {
            ctx.shadowColor = ctx.strokeStyle
            ctx.shadowOffsetX = ctx.lineWidth * 0.5
            ctx.shadowOffsetY = ctx.lineWidth * -0.6
            ctx.shadowBlur = 0
        }
    }

Once code changes done ... initiate the jSignature object

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

Answer 8

In case sombody still has a problem with this and uses the nonconflict version from the website from the author. This solved it for me:

Comment the following part in line 54 of jSignature.min.nonconflict.js

/*c.beginPath();c.moveTo(p,k);c.lineTo(l,i);c.stroke()*/