Javascript 如何在jSignature插件中删除画布上的灰色线条？

如何在

jsignation插件中从画布（签名面板）中删除灰色线条

是否有任何选项来验证用户是否输入签名？有什么内置的功能吗

---

恐怕没有关闭它的选项，因此唯一的解决方案是更改插件代码本身

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

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

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

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

我在项目中对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 });

现在我可以选择显示或隐藏它。
如何将装饰颜色设置为透明

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

作者确实提供了删除灰线的选项，但代码似乎没有签入。
访问此位置
并查找“文件已更改”选项卡

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

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

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

这可能太晚了，但希望它能帮助其他人在这个问题上绊倒。我添加了一些代码来禁用灰线，如果在初始化时将装饰颜色传递为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;

在我的git回购协议中，我知道这个问题已经存在了一年半，但现在有了更好的解决方案。希望这将帮助其他一些人寻找一种方法来保存图像，并从jSignature插件中删除灰线

更好的方法是：


正如作者所说：

“base30字符串的格式允许用户将该字符串保存在数据库中，并在应用程序需要时重新使用。base30字符串对于正在保存的数据量来说非常小。幸运的是，jSignature下载包含一个包装器，用于将base30字符串解码为向量点数组

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

我的意思是，你还想要什么？没有图像或蜡染或更改jSignature核心代码。只是完美的解决方案！非常感谢重新加载的PC

编辑：这种方法的唯一问题是它不适用于iOS。你必须使用base64。想法是一样的。
如果sombody仍然有这个问题，并使用作者网站上的非冲突版本。这为我解决了这个问题：

对jSignature.min.nonconflict.js第54行中的以下部分进行注释

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

如果您使用的是jSignature v2，c.lineTo（l，i）；-注释这一行以删除画布中的灰线。在该版本（V1）中，无法撤消我们的笔划。此操作非常有效，应该是我们必须在哪个文件中进行此更改的问题的答案