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(",")) 
 

項目主頁：http://www.baiduhome.net/lib/view/home/1341746318682