我怎样才能验证我是否在jSignature面板中绘制了一些东西？

Question

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

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

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

问题是我点击某个角落也是num_strock得到的增加。 对于一些拖累它不会增加。

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

Answer 1

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

Answer 2

根据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的标志变量吗？ 这表明有些东西被写入该区域

Answer 3

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

var isSignatureProvided=$sigdiv.jSignature('getData','base30')[1].length>1?true:false;

Answer 4

聚会很晚......所以我想对我的发现给出一些意见，每个都与使用$("#sigDiv").jSignature('getData', 'putSomethignInHere')函数用于验证签名是否存在。

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

native在sig框为空时返回对象.length == 0 ，但在sig框中有东西时返回.length > 0 。 如果你想知道有多少笔画只使用这个对象的长度。 注意：根据jSignature文档：

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

base30也返回一个对象。 在这里，我查看了此对象的第二个索引位置中的信息。 x = $("#sigDiv").jSignature('getData', 'base30')[1].length > 0 ? TRUE : FALSE 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 = $("#sigDiv").jSignature('getData', 'base30')[1].length > {insertValueHere} ? TRUE : FALSE 。 要验证最终用户在框中实际签名并提供了不仅仅是简单的“。” 小'​​x'。 从base30产生的第二个索引的返回值随着复杂性而变大。 因此，如果用户确实只输入一个点，则x = $("#sigDiv").jSignature('getData', 'base30')[1].length约为5.生成的值越来越大更多最终用户在框中绘制。 我在测试过程中记录的最高长度是2272.我在盒子里乱涂乱画，整个15秒。

根据jSig文档：

base30（别名image / jSignature; base30）（导出和导入）（VECTOR）数据格式是Base64精神压缩格式，针对荒谬的紧凑性和本机URL兼容性进行了调整。 它是“本机”数据结构，压缩成所有向量的紧凑字符串表示。

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

svgbase64 - 这与具有异常的image类似。 与image不同，使用svgbase64会在第二个位置产生一个长长的短字符串。 此外，当我执行Chrome verse FF Developer检查时，此字符串也是相同的。 这是我停止测试的地方。 所以我假设您可以使用svgbase64进行验证。

这些是我的结论，你的结论可能会有所不同。 请不要对我不好。

Answer 5

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

t.dataEngine.data.length

这将帮助您查找签名面板的笔划数。

Answer 6

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

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

Answer 7

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

$('.signature').each(function (index) {
    var datapair = $(this).jSignature("getData", "svgbase64");
    if (datapair[1].length > 1000 ) {
        // Signature is valid; do something with it here.
    }
});

Answer 8

最好的答案：

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..');
}

Answer 9

不幸的是，没有现有的答案对我有用。 在我的网站上，我有两种输入签名的方法：manual和jSignature（'importData'，imgBase64）jSignature（'getData'，'native'）的测试只适用于手动绘图。 并没有什么适用于图像方式。 解决方案似乎很简单。 只需测试canvas元素。 它可能不适用于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();
}

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