6

jSignature有画布，它有一个类。我如何验证 jSignature 我是否画了一些东西？

我为点击事件添加了一个绑定。

$sigdiv.bind('click', function(e) {
    $("#num_strok").val(parseInt($("#num_strok").val()) + 1);
});

问题是即使我点击一些角落也会num_strock增加。对于一些拖动它不会增加。

我已经在谷歌中尝试过它是否有任何内置isEmpty功能。但我还没有找到任何东西。

4

9 回答 9

20 
 if( $sigdiv.jSignature('getData', 'native').length == 0) {
    alert('Please Enter Signature..');
 }
于 2014-09-12T09:51:11.337 回答
5

派对很晚了......所以我想就我的发现提供一些输入，每一个都与使用$("#sigDiv").jSignature('getData', 'putSomethignInHere')函数来验证签名是否存在有关。

以下是我为传递给 jSignature 函数的第二个属性检查的选项：

native.length == 0当 sig box 是空的，但是当 sig box 里有东西时，返回一个对象的对象.length > 0。如果您想知道有多少笔画，只需使用此对象的长度即可。注意：根据 jSignature 文档：

“Stroke = mousedown + mousemoved * n (+ mouseup 但我们没有记录，因为那是“结束/缺乏移动”指示器)”

base30还返回一个对象。这里我查看了这个对象的第二个索引位置的信息。 x = $("#sigDiv").jSignature('getData', 'base30')[1].length > 0 ? TRUE : FALSE如果该框已签名，则此处x将产生 TRUE，而当 jSig 框保持不变时，将产生 FALSE。

就我而言，我使用该base30属性来验证签名复杂性，而不仅仅是“最终用户是否画了一些东西？”。 x = $("#sigDiv").jSignature('getData', 'base30')[1].length > {insertValueHere} ? TRUE : FALSE. 为了验证最终用户实际在框中签名并给出的不仅仅是一个简单的“。” 小'​​x'。产生的第二个索引的返回值base30随着复杂度的增加而变大。因此，如果用户只输入了一个点， x = $("#sigDiv").jSignature('getData', 'base30')[1].length则大约是 5。最终用户在框中绘制的越多，产生的值就会变得越来越大。我在测试期间记录的最高长度是 2272。我在盒子里乱涂乱画了 15 秒。

根据 jSig 文档：

base30 (alias image/jSignature;base30) (EXPORT AND IMPORT) (VECTOR) 数据格式是一种基于 Base64 的压缩格式，针对荒谬的紧凑性和原生 url 兼容性进行了调整。它是压缩成所有向量的紧凑字符串表示的“原生”数据结构。

image- 这是我会避免验证的选择。它在第二个索引位置生成一个带有长字符串的对象。我测量的最后一个是 672 个字符长。image无论 sig 框是空白还是已使用，使用都会生成一个字符串。为了让事情变得更无用，Chrome verse 中的空白签名框与 FF Developer 中的空白签名框生成的字符串是不同的。我确定该image值有用，但不能验证。

svgbase64image- 这与例外情况类似。与 不同image， usingsvgbase64在第二个位置产生一个长而短的字符串。此外，当我执行 Chrome verse FF Developer 检查时，这个字符串是相同的。这是我停止测试的地方。所以我假设你可以svgbase64用于验证。

这些是我的结论，你的可能会有所不同。请不要以我的低劣名声反对我。

于 2017-05-19T20:35:49.557 回答
4

根据jSignature 网站，API 中有一个getData功能。如果您getData在空签名区域上使用该函数作为参考，则可以随时使用getData并将其与空参考进行比较。然后，您将能够判断是否在签名区域中写入了某些内容。

这只是我的猜测，因为我没有使用过这个脚本，但我认为这样的东西可以工作。

编辑

我也在网站上找到了这个

jSignature 被初始化的 dom 元素在将笔画添加到存储后立即发出“更改”事件。（换句话说，当用户画完每个笔画时。如果用户画了 3 个笔画，则在每个笔画完成后，此事件会发出 3 次。）

以下是绑定到该事件的方式：

$("#signature").bind('change', function(e){ /* 'e.target' will refer
to div with "#signature" */ })

事件通过“线程”（ setTimeout(..., 3) ）异步发出，因此您无需将事件处理程序包装到任何类型的“线程”中，因为 jSignature 小部件将继续运行并且不会等待您将完成自定义事件处理程序逻辑。

change你不能只设置一个标志变量，在第一个事件上设置为 true吗？这将表明某些内容被写入该区域

于 2012-12-17T12:46:37.343 回答
2

如果有任何点，您可以检查 base30 向量。

var isSignatureProvided=$sigdiv.jSignature('getData','base30')[1].length>1?true:false;
于 2012-12-21T06:42:03.087 回答
1

这对我有用，部分使用 roch 代码：它基本上在提交验证之前将签名分配给隐藏的文本区域：

<div id="signatureparent">
<div id="signature"></div>
<label for='signature_capture' class='error'></label>
</div>
<span style="visibility:hidden;">
<textarea name="signature_capture" class="required" id="signature_capture"></textarea> 
</span> 


<script>
$(document).ready(function(){
$('#submit').click(function() {
    var isSignatureProvided=$('#signature').jSignature('getData','base30')[1].length>1?true:false;
    if (isSignatureProvided) {
        var $sigdiv = $("#signature");
        var datapair = $sigdiv.jSignature("getData", "svgbase64");
        var data = $('#signature').jSignature('getData');
        $("#signature_capture").val(data);
    }
});
});
</script>
于 2014-03-22T16:22:47.600 回答
1

不幸的是，没有一个现有的答案对我有用。在我的网站上，我有两种输入签名的方法：手动和 jSignature('importData', imgBase64) 测试 jSignature('getData', 'native') 仅适用于手动绘图。图像方式没有任何效果。解决方案似乎很简单。只需测试画布元素。它可能不适用于 IE9，但谁在乎呢。这是在 TypeScript 中的：

isSignatureBlank() {       
    var canvas = <any>$('#signatureElem').find("canvas")[0];
    if (!canvas) return true;
    this.emptyCanvas = this.emptyCanvas || document.createElement('canvas');
    this.emptyCanvas.width = canvas.width;
    this.emptyCanvas.height = canvas.height;

    return canvas.toDataURL() == this.emptyCanvas.toDataURL();
}

从这里采用：如何检查画布是否为空白？

于 2018-12-14T11:31:58.027 回答
0

在您的 javascript 文件中搜索代码。检查他们何时隐藏“撤消笔划”块

t.dataEngine.data.length

这将帮助您找到对签名面板进行了多少笔划。

于 2012-12-18T10:57:13.400 回答
0

也许尝试这样的事情（假设您的签名字段属于“签名”类）......

$('.signature').each(function (index) {
    var datapair = $(this).jSignature("getData", "svgbase64");
    if (datapair[1].length > 1000 ) {
        // Signature is valid; do something with it here.
    }
});
于 2015-05-30T04:06:46.260 回答
0

最佳答案：

if($sigdiv.jSignature('getData', 'native').length == 0) {
  alert('Please Enter Signature..');
}

产生以下错误：

$sigdiv.jSignature(...) is undefined

所以我建议使用：

if(typeof($sigdiv.jSignature('getData', 'native')) != 'undefined') {
  alert('Please Enter Signature..');
}
于 2017-02-27T11:45:11.437 回答