jSignature可以使你在浏览器中进行涂鸦的jQuery插件
jSignature是一个JavaScript的jQuery插件，能够在浏览器窗口中捕获一定区域内的涂鸦画面，允许使用者使用鼠标、笔和手指进行作画(本人有尝使用笔和手指，根本画不出东西...)
下面举例说明.
加入jSignature到你的页面中
需要用到
1)jQuery插件，可以到http://jquery.com/下载
2)下载jSignature
注意FlashCanvas 是有两个文件组成的，需要放在同一个文件夹下，不要单独存放，因为他们是协同工作的
首先在需要引入的文件中引入你的jQuery插件地址，然后再引入jSignature插件的存放位置。
<!-- you load jquery somewhere above here ... --> <!--[if lt IE 9]> <script type="text/javascript" src="libs/flashcanvas.js"></script> <![endif]--> <script src="libs/jSignature.min.js"></script> <div id="signature"></div> <script> $(document).ready(function() { $("#signature").jSignature() }) </script>解释说明:
The [if lt IE 9] part loads FlashCanvas library for IE less than 9. (FlashCanvas is supported only on IE, so, there is no point doing feature detection.)
这样就载入了jSignature插件
下面我们就拥有可以进行作画的画布了
Next we have the div inside which the canvas element will be created (You cannot reuse a canvas element at this time. Plugin creates its own Canvas elem inside the DIV.)
Lastly, the script invokes the signature widget within the specified DIV.
API
下面的方法是在jQuery对象在运作下工作的: .jSignature(String command, *args)
Arguments vary per command. When provided, command is expected to be a string with a command for jSignature. Commands supported at this time: init, reset, getData, setData, listPlugins
API使用举例:
var $sigdiv = $("#signature") $sigdiv.jSignature() // 初始化jSignature插件. // after some doodling... $sigdiv.jSignature("reset") //重置画布，可以进行重新作画. // Getting signature as SVG and rendering the SVG within the browser. // (!!! inline SVG rendering from IMG element does not work in all browsers !!!) // this export plugin returns an array of [mimetype, base64-encoded string of SVG of the signature strokes] var datapair = $sigdiv.jSignature("getData", "svgbase64") var i = new Image() i.src = "data:" + datapair[0] + "," + datapair[1] $(i).appendTo($("#someelement") // append the image (SVG) to DOM. // Getting signature as "base30" data pair // array of [mimetype, string of jSIgnature"s custom Base30-compressed format] datapair = $sigdiv.jSignature("getData","base30") // reimporting the data into jSignature. // import plugins understand data-url-formatted strings like "data:mime;encoding,data" $sigdiv.jSignature("setData", "data:" + datapair.join(","))