我怎樣才能驗證我是否在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();
}

從這里采用： 如何檢查畫布是否為空白？