如何从画布（签名面板）中删除灰色线jSignature plugin？
是否有任何选项可以验证用户是否输入签名？有任何内置功能吗？
问问题
9725 次
8 回答
10
如何将装饰颜色设置为透明
$(document).ready(function() {
$("#signature").jSignature({
'background-color': 'transparent',
'decor-color': 'transparent',
});
});
于 2013-10-31T04:03:23.157 回答
6
恐怕没有关闭它的选项，所以唯一的解决方案是更改插件代码本身
插件中有一个部分用于绘制基线。像这样注释掉
// 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
于 2012-12-06T10:17:06.850 回答
2
我知道这个问题已经存在 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);
?>
正如作者所说：
“ base30 字符串格式允许用户将字符串保存在数据库中，并在以后应用程序需要时重复使用。base30 字符串对于要保存的数据量来说非常小。幸运的是，jSignature 下载包含一个包装器将 base30 字符串解码为向量点数组。
使用上面的代码将允许您从 jSignature 获取 base30 输入，并创建一个没有签名行装饰的 PNG 文件。这提供了一种将字符串保存在 MySQL中的方法，然后在需要时将图像流式传输到浏览器。我将此技术与 DOM PDF 结合使用，在 PDF 文件中呈现签名“
我的意思是，你还想要什么？没有 imagick 或 batik 或更改 jSignature 核心代码。简直完美解决！非常感谢 ReloadedPC
编辑：这种方法的唯一问题是不适用于 iOS。你必须使用base64。这个想法是一样的。
于 2014-07-19T17:39:05.597 回答
1
这可能为时已晚，但希望它可以帮助其他人遇到这个问题。如果在初始化时将 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;
它在我的 git repo 中，地址为https://github.com/brinley/jSignature
于 2013-12-15T23:47:06.440 回答
1
如果您使用的是 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);
..........................
};
于 2012-12-06T10:29:00.437 回答
1
我在我的项目中对 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 });
现在我可以选择显示或隐藏它。
于 2013-10-10T15:09:49.153 回答
1
万一 sombody 对此仍有疑问并使用作者网站上的非冲突版本。这为我解决了它：
注释 jSignature.min.nonconflict.js 的第 54 行以下部分
/*c.beginPath();c.moveTo(p,k);c.lineTo(l,i);c.stroke()*/
于 2016-01-04T10:57:33.437 回答
0
作者确实提供了删除灰线的选项，但似乎代码未签入。访问此位置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
});
于 2013-11-17T02:36:03.327 回答