How to remove a series of color flowers from CANVAS in the jSignature plugin?

Question

How to remove gray color from CANVAS panel (signature panel) in jSignature plugin ?

Is it possible to check whether the user enters a signature or not? Any built-in function for this?

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

Answer 1

How about this decoration color setting for transparent

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

Answer 2

I am afraid there is no way to disable it, so the only solution would be to change the plugin code itself

The plugin has a section that draws a baseline. Just comment this as

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

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 opportunity to show it or hide it.

Answer 4

It may be too late, but hope this helps someone else stumble upon this. I added some code to disable the gray line if you pass the decor color as null when it is initialized. I prefer this approach 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; 

In my git registry https://github.com/brinley/jSignature

Answer 5

I know that the question lasts 1 year and a half, but as of today there is a better solution. Hope this helps some other people find a way to save the image and remove the gray image from the unusual jSignature plugin.

The best approach is 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 the user to save the string in the database and reuse later if this application requires. The base30 string is very small for the amount of data that is saved. Fortunately, the jSignature download includes a shell that decodes the base30 string into an array of vector points.

Using the code above, you can take base30 input from jSignature and create a PNG file without formatting the signature line . This makes it possible to save the string in MySQL , and then transfer the image to the browser when you need to. I used this method in conjunction with the PDF DOM to sign the PDF file "

I mean, what do you want more? No image or batik or jSignature kernel code changes. Just the perfect solution! Thanks a lot ReloadedPC

Edit: The only problem with this approach is that it doesn't work for iOS. You must use base64. The idea is the same.

Answer 6

If you are using jSignature v2 (version 2),

c.lineTo(l, i); - comment on this line to remove the gray image on the canvas.

The code below 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 7

The author provided the opportunity to remove the gray line, but it seems that the code is not installed. Visit this place https://github.com/willowsystems/jSignature/pull/17/files and find the “Files changed” tab.

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

  // 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 } } 

After changing the code ... initiate the jSignature object

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

Answer 8

In case someone still has a problem with this and uses a non-conflict version from the author’s website. This solved it for me:

Comment on the next part on line 54 jSignature.min.nonconflict.js

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