检查jSignature是否有签名数据

检查jSignature是否有数据

  如何检查jSignature是否有数据,如果没有做任何操作直接获取数据默认是一张白色的图片。jSignature有个getData方法获取签名数据用的,默认数据类型为image(图片base64字符串)。其中有一个native获取的是用户绘制的数据数组,如果没做任何操作或者回退到没有任何操作,这个数组长度为0.

  getData参数有如下几个类型,来源:https://github.com/willowsystems/jSignature

  • default (EXPORT ONLY) (BITMAP) data format is compatible with output format jSignature produced in earlier versions when getData was called without arguments. "Default" is now invoked (obviously) by default whenever you $obj.jSignature("getData") The data format is that produced natively by Canvas - data-url-formatted, base64 encoded (likely PNG) bitmap data that looks like this: data:image/png;base64,i1234lkj123;k4;l1j34l1kj3j... This export call returns a single data-url-formatted string.
  • native (EXPORT AND IMPORT) (VECTOR) data format is custom representation of drawing strokes as an array of objects with props .x, .y, each of which is an array. This JavaScript objects structure is the actual data structure where each of the drawing strokes is stored in jSignature. The structure is designed specifically for speed and efficiency of collecting strokes data points. (Although it is a bit counter-intuitive, octopus-looking structure, it (a) allows to pile up two-axis coordinates fast without a need to create a Point objects for each data point and (b) provides for very easy loop-based processing of data.) Although you could JSONify that, pass it around, parse, render from this, it may not be the most efficient way to store data, as internal format may change in other major versions of jSignature. I recommend looking at base30 format as a direct, but compact equivalent to "native"-as-JSON. What this data is good for is running stats (size, position of signature on the canvas) and editing strokes (allowing for "undo last stroke," for example).
  • base30 (alias image/jSignature;base30) (EXPORT AND IMPORT) (VECTOR) data format is a Base64-spirited compression format tuned for absurd compactness and native url-compatibility. It is "native" data structure compressed into a compact string representation of all vectors. Code examples (.Net, Python) detailing decompression of this format into render-able form (SVG, language-native coordinate arrays) are provided in the extras folder. One of possible ways of communicating the data to the server is JSONP, which has a practical URL length limit (imposed by IE, of course) of no more than 2000+ characters. This compression format is natively URL-compatible without a need for re-encoding, yet will fit into 2000 characters for most non-complex signatures.
  • svg (alias image/svg+xml) (EXPORT ONLY) (VECTOR) data format produces the signature as an SVG image (SVG XML text). All strokes are denoised and smoothed. This format is a good medium between "easy to view" and "hightly scalable." Viewing SVGs is natively supported in majority of today's browsers and, yet, this format can be infinitely scaled and enhanced for print. Data is textual, allowing for easy storage and transfer. The call to jSignature("getData","svg") returns an array of form ["image/svg+xml","svg xml here"].
  • svgbase64 (alias image/svg+xml;base64) (EXPORT ONLY) (VECTOR) This is same as "svg" plugin, but the SVG XML text is compressed using base64 encoding. Although many browsers now have built-in base64 encoder ( btoa() ), some, like Internet Explorer do not. This plugin has its own (short and efficient) copy of software-based base64 encoder which is invoked on the browsers lacking btoa(). The call to jSignature("getData","svgbase64") returns an array of form ["image/svg+xml;base64","base64-encoded svg xml here"]. This two-member array is rather easy to turn into data-url-formatted string ("data:" + data.join(",")) or turn into args and pass to server as form values.
  • image (EXPORT ONLY) (BITMAP) data format is essentially same as "default" above, but parsed apart so that mimetype and data are separate objects in an array structure similar to that produced by "svg" export. Example (shortened) ["image/png;base64","i123i412i341jijalsdfjijl234123i..."]. Because image export filter depends on (somewhat flaky) browser support and picks up needless data, recommend using this only for demonstration and during development.

  jSignature配置项如下,官网没有给出配置项,需要查看源代码。jSignature源代码地址:https://github.com/willowsystems/jSignature/blob/master/src/jSignature.js

  

 settings = {
		'width' : 'ratio'
		,'height' : 'ratio'
		,'sizeRatio': 4 // only used when height = 'ratio'
		,'color' : '#000'
		,'background-color': '#fff'
		,'decor-color': '#eee'
		,'lineWidth' : 0
		,'minFatFingerCompensation' : -10
//是否显示回退按钮,感觉有问题??配置这个不显示回退按钮,配置UndoButton:true才显示,源码bug??
		,'showUndoButton': false
		,'data': []
}

  jSignature事件:change,处理函数第一个参数为事件,事件target属性为初始化jSignature的dom对象。

  检查jSignature是否有数据源代码如下

<style>
#signature{border:dotted 2px #000;width:400px;height:300px}
</style>
<form method="post"><input type="hidden" name="sigbase64" />
    <div id="signature"></div>
    <input type="submit" value="提交签名" name="btn" disabled="disabled" />
</form>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.4.1/jquery.min.js"></script>
<!--兼容IE8-,使用flash绘制签名-->
<!--[if lt IE 9]>
<script type="text/javascript" src="/demo/jSignature/pflashcanvas.js"></script>
<![endif]-->
<script src="/demo/jSignature/jSignature.min.js"></script>
<script>
    var f = document.forms[0];
    f.onsubmit = function () {
        //其他验证
        //提交时获取base64数据
        f.sigbase64.value = sig.jSignature('getData');
    }
    var sig = $("#signature").jSignature({ UndoButton: true,height:300,width:'100%' }).bind('change', function (e) {
        //绑定change事件,判断如果有数据设置提交按钮可用
        f.btn.disabled = sig.jSignature('getData', 'native').length == 0;
    })
</script>

 


原创文章,转载请注明出处:检查jSignature是否有签名数据

评论(1)Web开发网
阅读(930)喜欢(0)JavaScript/Ajax开发技巧