JS签名插件JSignature使用
2016-06-14 14:55
489 查看
参考资料及文档
插件首页http://willowsystems.github.io/jSignature/#/about/
使用方法
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <script type="text/javascript" src="${pageContext.request.contextPath }/jquery-1.8.2.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/jSignature.min.js"></script> <script type="text/javascript"> $(function(){ //初始化插件 $("#signature").jSignature(); }) //输出签名图片 function jSignatureTest(){ var $sigdiv = $("#signature"); // $sigdiv.jSignature() // inits the jSignature widget. // after some doodling... // $sigdiv.jSignature("reset") // clears the canvas and rerenders the decor on it. var datapair = $sigdiv.jSignature("getData", "svgbase64") console.log(datapair); // datapair = ["image/svg+xml;base64","PD94bWwgdmVyc2lvbj0iMS4wIi // BlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2Zy // BQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My // 5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPS // JodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB3aWR0aD // 0iMzEiIGhlaWdodD0iMzQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMD // AwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm // 9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0gMSAxIGMgMC4xMiAwLjExIDUuMDEgMy // 43NiA3IDYgYyAzLjI1IDMuNjUgNS43MSA4LjM1IDkgMTIgYyAyLjY0IDIuOTMgNi // 4zNyA1LjE2IDkgOCBjIDEuNTggMS43IDQgNiA0IDYiLz48L3N2Zz4="] var i = new Image(); i.src = "data:" + datapair[0] + "," + datapair[1] $(i).appendTo($("#image")) // append the image (SVG) to DOM. } function reset(){ var $sigdiv = $("#signature"); $sigdiv.jSignature("reset"); } </script> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> </head> <body> <div id="signature" style="height: 100%;"></div> <button type="button" onclick="jSignatureTest()">output signature</button> <button type="button" onclick="reset()">reset</button> <div id="image" style="margin:20px"></div> </body> </html>
相关文章推荐
- javascript面向对象编程
- js数组的五种迭代方法及两种归并方法(推荐)
- XSS调用外部JS
- 图解Javascript原型链
- Web程序员必备的7个JavaScript函数
- 解决JSP路径问题的方法(jsp文件开头path, basePath作用)
- Javascript中的迭代、归并方法详解
- JavaScript接口的实现三种方式(推荐)
- jsonp实现跨域访问
- JavaScript 自定义函数库
- 使用JavaScript创建新样式表和新样式规则
- 博客园js
- 博客园js
- 不可错过的javascript迷你库
- JSON
- 深入理解js构造函数
- JavaScript的作用域链
- jsp Failed to create the part's controls
- 用jackson封装的JSON工具类
- js实现接口的几种方式