Javascript 我如何验证我是否在jSignature面板中绘制了一些东西？

jSignature

有画布，它有一个类。我如何验证jSignature是否已绘制了某些内容

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

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

问题是，即使我点击了某个角落，也会得到提升。对某些人来说，它不会增加

我在谷歌上试过，它是否有内置的

isEmpty

功能。但我什么也没找到

根据，API中有一个

getData

函数。如果对空签名区域使用

getData

函数作为引用，则可以随时使用

getData

，并将其与空引用进行比较。然后，您就可以判断签名区域中是否有文字

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

编辑 我还发现了这个

初始化jSignature的dom元素发出“change” 笔划完成后立即将事件添加到存储器中。 （换句话说，当用户完成绘制每个笔划时。如果用户绘制 3个笔划，每个笔划完成后，此事件将发出3次。）

以下是您将如何绑定到该事件：

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

---

您不能只设置一个在第一次

change

事件中设置为true的标志变量吗？这将表明某个内容写入了该区域

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

t.dataEngine.data.length

---

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

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

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

---

这对我有效，部分使用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>

$（文档）.ready（函数（）{
$（“#提交”）。单击（函数（）{
var isSignatureProvided=$（“#签名”）.jSignature（'getData'，'base30'）[1]。长度>1？true:false；
如果（已提供ISSignature）{
var$sigdiv=$（“#签名”）；
var datapair=$sigdiv.jSignature（“getData”、“svgbase64”）；
var data=$（'#signature'）.jSignature（'getData'）；
$（“签名捕获”）.val（数据）；
}
});
});

也许可以尝试类似的方法（假设您的签名字段属于“签名”类）

最佳答案是：

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

---

晚会很晚了。。。所以我想就我的发现提供一些信息，每一个都与 使用

$（“#sigDiv”）.jSignature（'getData'，'putsomethignehere'）

函数验证是否存在签名

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

native

在sig框为空时返回对象的对象

.length==0

，但在sig框中有内容时返回对象的对象

.length>0

。如果您想知道有多少笔划，只需使用此对象的长度即可。 注：根据jSignature文件：

“Stroke=mousedown+mousemoved*n（+mouseup，但我们不记录，因为这是“结束/缺少移动”指示器）”

base30

还返回一个对象。这里我查看了这个对象第二个索引位置的信息。

x=$（“#sigDiv”）.jSignature（'getData'，'base30'）[1]。长度>0？TRUE:FALSE

此处

x

如果框已签名，则为TRUE；如果jSig框未被触动，则为FALSE

在我的例子中，我使用了

base30

属性来验证签名的复杂性，而不仅仅是“最终用户画了什么吗？”。

x=$（“#sigDiv”）.jSignature（'getData'，'base30'）[1]。长度>{insertValueHere}？真：假

。为了验证最终用户是否在框中实际签名，并给出了多个简单的“.”小“x”。从

base30

生成的第二个索引的返回值随着复杂性的增加而增大。因此，如果用户只输入了一个点，

x=$（“#sigDiv”）.jSignature（'getData'，'base30'）[1]。长度约为5。最终用户在框中绘制的越多，生成的值就越大。我在测试中记录的最高长度是2272。我在盒子里乱涂乱画了15秒

根据jSig文件：

base30（别名图像/jSignature；base30）（导出和导入）（矢量）数据格式是一种Base64格式的压缩格式，经过优化，可实现简洁性和本机url兼容性。它是压缩为所有向量的紧凑字符串表示形式的“本机”数据结构

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

svgbase64
-这与
image
类似，但有例外。与
image
不同，使用
svgbase64
在第二个位置生成一个长而短的字符串。此外，这个字符串与我执行Chrome verse FF开发者检查时的字符串相同。这就是我停止测试的地方。因此，我假设您可以使用
svgbase64
进行验证

这些是我的结论，你的结论可能会有所不同。请不要这样
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..');
}

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