Question

如何从jSignature plugin中的CANVAS（签名面板）中删除灰色线？

是否有任何选项可以验证用户是否输入签名？任何内置功能吗？

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

Answer 1

如何将装饰颜色设置为透明

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

Answer 2

我担心没有选择关闭它，所以唯一的解决方案就是更改插件代码本身

插件中有一个部分用于绘制基线。就这样评论

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

如果您使用的是jSignature v2（第2版），

c.lineTo(l, i); - 注释此行以删除画布中的灰线。

代码下方

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

我在项目中对jSignature进行了以下更改：

showLine: true, //added showLine in default options

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

然后，当我这样做时，我会通过true或false

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

现在我可以选择显示或隐藏它。

Answer 5

这可能为时已晚，但希望它可以帮助别人绊倒这个。如果在初始化时将decor-color作为null传递，我添加了一些禁用灰线的代码。我更喜欢这种方法，然后添加另一个属性来启用/禁用签名行。

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

这是我在https://github.com/brinley/jSignature

的git回购

Answer 6

我知道问题是1岁半，但今天有更好的解决方案。希望这将有助于其他人搜索保存图像的方法，并从jSignature 非凡插件中删除灰线。

这里更好的方法：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);

＆GT;

正如作者所说：

＆＃34; base30字符串格式允许用户将字符串保存在数据库中，如果应用程序需要，则稍后重复使用。对于正在保存的数据量， base30字符串非常小。幸运的是，jSignature下载包含一个包装器，它将base30字符串解码为一个矢量点数组。

使用上面的代码可以从jSignature中获取base30输入，创建一个没有签名行装饰的PNG文件。这提供了一种方法在MySQL中保存字符串，然后在需要时将图像流式传输到浏览器。我使用这种技术结合DOM PDF在PDF文件中呈现签名＆＃34;

我的意思是，你想要的不止于此？没有想象力或蜡染或更改jSignature核心代码。完美的解决方案！非常感谢ReloadedPC

编辑：此方法的唯一问题是不适用于iOS。你必须使用base64。这个想法是一样的。

Answer 7

作者确实提供了删除灰线的选项，但似乎代码未签入。访问此地点https://github.com/willowsystems/jSignature/pull/17/files 并查找“文件已更改”选项卡。

在选项卡下 - 您将找到带有粉红色背景和（ - ）减号的删除行，并添加带绿色背景和（+）加号的行。您需要自己更改源。像这样的东西

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

完成代码更改后...启动jSignature对象

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

Answer 8

如果sombody仍有问题，请使用作者网站上的非冲突版本。这解决了我的问题：

在jSignature.min.nonconflict.js

的第54行注释以下部分

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

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

8 个答案: