html5手写签名的实现示例
发布时间:2023-07-17 16:43:45 作者:一路向北North 我要评论
公司新做了个功能,一些审核的地方需要加入一些手写签名的功能,本文就介绍了html5手写签名的实现示例,具有一定的参考价值,感兴趣的可以了解一下
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
前言
业务中需要用户进行签字,如何让用户在手机端进行签字?
示例如下
代码已分享至Gitee: https://gitee.com/lengcz/qianming
H5实现手写签字
创建一个html页面
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" > <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> < meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" > < meta name = "viewport" content = "initial-scale=1.0, target-densitydpi=device-dpi" /> <!-- this is for mobile (Android) Chrome --> < meta name = "viewport" content = "initial-scale=1.0, width=device-height" > <!-- mobile Safari, FireFox, Opera Mobile --> < script src = "/js/modernizr.js" ></ script > <!--[if lt IE 9]> <script type="text/javascript" src="libs/flashcanvas.js"></script> <![endif]--> < style type = "text/css" > div { margin-top:1em; margin-bottom:1em; } input { padding: .5em; margin: .5em; } select { padding: .5em; margin: .5em; } #signatureparent { color:darkblue; background-color:darkgrey; /*max-width:600px;*/ padding:20px; } /*This is the div within which the signature canvas is fitted*/ #signature { border: 2px dotted black; background-color:lightgrey; } /* Drawing the 'gripper' for touch-enabled devices */ html.touch #content { float:left; width:92%; } html.touch #scrollgrabber { float:right; width:4%; margin-right:2%; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAFCAAAAACh79lDAAAAAXNSR0IArs4c6QAAABJJREFUCB1jmMmQxjCT4T/DfwAPLgOXlrt3IwAAAABJRU5ErkJggg==) } html.borderradius #scrollgrabber { border-radius: 1em; } </ style > </ head > < body > < div > < div id = "content" > < div id = "signatureparent" > < div >jSignature inherits colors from parent element. Text = Pen color. Background = Background. (This works even when Flash-based Canvas emulation is used.)</ div > < div id = "signature" ></ div ></ div > < div id = "tools" ></ div > < div >< p >Display Area:</ p >< div id = "displayarea" ></ div ></ div > </ div > < div id = "scrollgrabber" ></ div > </ div > < script src = "/js/jquery-3.2.1.min.js" ></ script > < script type = "text/javascript" > jQuery.noConflict() </ script > < script > /* @preserve jQuery pub/sub plugin by Peter Higgins (dante@dojotoolkit.org) Loosely based on Dojo publish/subscribe API, limited in scope. Rewritten blindly. Original is (c) Dojo Foundation 2004-2010. Released under either AFL or new BSD, see: http://dojofoundation.org/license for more information. */ (function($) { var topics = {}; $.publish = function(topic, args) { if (topics[topic]) { var currentTopic = topics[topic], args = args || {}; for (var i = 0, j = currentTopic.length; i < j ; i++) { currentTopic[i].call($, args); } } }; $ .subscribe = function (topic, callback) { if (!topics[topic]) { topics[topic] = []; } topics[topic].push(callback); return { "topic": topic, "callback": callback }; }; $ .unsubscribe = function (handle) { var topic = handle .topic; if (topics[topic]) { var currentTopic = topics [topic]; for (var i = 0 , j = currentTopic .length; i < j; i++) { if (currentTopic[i] === handle.callback) { currentTopic.splice(i, 1); } } } }; })(jQuery); </script> < script src = "/js/jSignature.min.noconflict.js" ></ script > < script > (function($){ $(document).ready(function() { // This is the part where jSignature is initialized. var $sigdiv = $("#signature").jSignature({'UndoButton':true}) // All the code below is just code driving the demo. , $tools = $('#tools') , $extraarea = $('#displayarea') , pubsubprefix = 'jSignature.demo.' var export_plugins = $sigdiv.jSignature('listPlugins','export') , chops = ['< span >< b >提取签名数据: </ b ></ span >< select >','< option value = "" >(select export format)</ option >'] , name for(var i in export_plugins){ if (export_plugins.hasOwnProperty(i)){ name = export_plugins[i] chops.push('< option value = "' + name + '" >' + name + '</ option >') } } chops.push('</ select >< span >< b > or: </ b ></ span >') $(chops.join('')).bind('change', function(e){ if (e.target.value !== ''){ var data = $sigdiv.jSignature('getData', e.target.value) $.publish(pubsubprefix + 'formatchanged') if (typeof data === 'string'){ $('textarea', $tools).val(data) } else if($.isArray(data) && data.length === 2){ $('textarea', $tools).val(data.join(',')) $.publish(pubsubprefix + data[0], data); } else { try { $('textarea', $tools).val(JSON.stringify(data)) } catch (ex) { $('textarea', $tools).val('Not sure how to stringify this, likely binary, format.') } } } }).appendTo($tools) $('< input type = "button" value = "Reset" >').bind('click', function(e){ $sigdiv.jSignature('reset') }).appendTo($tools) $('< div >< textarea style = "width:100%;height:7em;" ></ textarea ></ div >').appendTo($tools) $.subscribe(pubsubprefix + 'formatchanged', function(){ $extraarea.html('') }) $.subscribe(pubsubprefix + 'image/svg+xml', function(data) { try{ var i = new Image() i.src = 'data:' + data[0] + ';base64,' + btoa( data[1] ) $(i).appendTo($extraarea) } catch (ex) { } var message = [ "If you don't see an image immediately above, it means your browser is unable to display in-line (data-url-formatted) SVG." , "This is NOT an issue with jSignature, as we can export proper SVG document regardless of browser's ability to display it." , "Try this page in a modern browser to see the SVG on the page, or export data as plain SVG, save to disk as text file and view in any SVG-capabale viewer." ] $( "< div >" + message.join("< br />") + "</ div >" ).appendTo( $extraarea ) }); $.subscribe(pubsubprefix + 'image/svg+xml;base64', function(data) { var i = new Image() i.src = 'data:' + data[0] + ',' + data[1] $(i).appendTo($extraarea) var message = [ "If you don't see an image immediately above, it means your browser is unable to display in-line (data-url-formatted) SVG." , "This is NOT an issue with jSignature, as we can export proper SVG document regardless of browser's ability to display it." , "Try this page in a modern browser to see the SVG on the page, or export data as plain SVG, save to disk as text file and view in any SVG-capabale viewer." ] $( "< div >" + message.join("< br />") + "</ div >" ).appendTo( $extraarea ) }); $.subscribe(pubsubprefix + 'image/png;base64', function(data) { var i = new Image() i.src = 'data:' + data[0] + ',' + data[1] $('< span >< b >As you can see, one of the problems of "image" extraction (besides not working on some old Androids, elsewhere) is that it extracts A LOT OF DATA and includes all the decoration that is not part of the signature.</ b ></ span >').appendTo($extraarea) $(i).appendTo($extraarea) }); $.subscribe(pubsubprefix + 'image/jsignature;base30', function(data) { $('< span >< b >This is a vector format not natively render-able by browsers. Format is a compressed "movement coordinates arrays" structure tuned for use server-side. The bonus of this format is its tiny storage footprint and ease of deriving rendering instructions in programmatic, iterative manner.</ b ></ span >').appendTo($extraarea) }); if (Modernizr.touch){ $('#scrollgrabber').height($('#content').height()) } }) })(jQuery) </ script > </ body > </ html > |
modernizr.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 | /* Modernizr 2.5.2 (Custom Build) | MIT & BSD * Build: http://www.modernizr.com/download/#-borderradius-csscolumns-canvas-touch-mq-cssclasses-addtest-teststyles-testprop-testallprops-prefixes-domprefixes-fullscreen_api */ ;window.Modernizr = function (a, b, c) { function A(a) { j.cssText = a } function B(a, b) { return A(m.join(a + ";" ) + (b || "" )) } function C(a, b) { return typeof a === b } function D(a, b) { return !!~( "" + a).indexOf(b) } function E(a, b) { for ( var d in a) if (j[a[d]] !== c) return b == "pfx" ? a[d] : !0; return !1 } function F(a, b, d) { for ( var e in a) { var f = b[a[e]]; if (f !== c) return d === !1 ? a[e] : C(f, "function" ) ? f.bind(d || b) : f } return !1 } function G(a, b, c) { var d = a.charAt(0).toUpperCase() + a.substr(1) , e = (a + " " + o.join(d + " " ) + d).split( " " ); return C(b, "string" ) || C(b, "undefined" ) ? E(e, b) : (e = (a + " " + p.join(d + " " ) + d).split( " " ), F(e, b, c)) } var d = "2.5.2" , e = {}, f = !0, g = b.documentElement, h = "modernizr" , i = b.createElement(h), j = i.style, k, l = {}.toString, m = " -webkit- -moz- -o- -ms- " .split( " " ), n = "Webkit Moz O ms" , o = n.split( " " ), p = n.toLowerCase().split( " " ), q = {}, r = {}, s = {}, t = [], u = t.slice, v, w = function (a, c, d, e) { var f, i, j, k = b.createElement( "div" ), l = b.body, m = l ? l : b.createElement( "body" ); if (parseInt(d, 10)) while (d--) j = b.createElement( "div" ), j.id = e ? e[d] : h + (d + 1), k.appendChild(j); return f = [ "­" , "<style>" , a, "</style>" ].join( "" ), k.id = h, m.innerHTML += f, m.appendChild(k), l || g.appendChild(m), i = c(k, a), l ? k.parentNode.removeChild(k) : m.parentNode.removeChild(m), !!i }, x = function (b) { var c = a.matchMedia || a.msMatchMedia; if (c) return c(b).matches; var d; return w( "@media " + b + " { #" + h + " { position: absolute; } }" , function (b) { d = (a.getComputedStyle ? getComputedStyle(b, null ) : b.currentStyle)[ "position" ] == "absolute" }), d }, y = {}.hasOwnProperty, z; !C(y, "undefined" ) && !C(y.call, "undefined" ) ? z = function (a, b) { return y.call(a, b) } : z = function (a, b) { return b in a && C(a.constructor.prototype[b], "undefined" ) } , Function.prototype.bind || (Function.prototype.bind = function (b) { var c = this ; if ( typeof c != "function" ) throw new TypeError; var d = u.call(arguments, 1) , e = function () { if ( this instanceof e) { var a = function () {}; a.prototype = c.prototype; var f = new a , g = c.apply(f, d.concat(u.call(arguments))); return Object(g) === g ? g : f } return c.apply(b, d.concat(u.call(arguments))) }; return e } ); var H = function (c, d) { var f = c.join( "" ) , g = d.length; w(f, function (c, d) { var f = b.styleSheets[b.styleSheets.length - 1] , h = f ? f.cssRules && f.cssRules[0] ? f.cssRules[0].cssText : f.cssText || "" : "" , i = c.childNodes , j = {}; while (g--) j[i[g].id] = i[g]; e.touch = "ontouchstart" in a || a.DocumentTouch && b instanceof DocumentTouch || (j.touch && j.touch.offsetTop) === 9 }, g, d) }([, [ "@media (" , m.join( "touch-enabled),(" ), h, ")" , "{#touch{top:9px;position:absolute}}" ].join( "" )], [, "touch" ]); q.canvas = function () { var a = b.createElement( "canvas" ); return !!a.getContext && !!a.getContext( "2d" ) } , q.touch = function () { return e.touch } , q.borderradius = function () { return G( "borderRadius" ) } , q.csscolumns = function () { return G( "columnCount" ) } ; for ( var I in q) z(q, I) && (v = I.toLowerCase(), e[v] = q[I](), t.push((e[v] ? "" : "no-" ) + v)); return e.addTest = function (a, b) { if ( typeof a == "object" ) for ( var d in a) z(a, d) && e.addTest(d, a[d]); else { a = a.toLowerCase(); if (e[a] !== c) return e; b = typeof b == "function" ? b() : b, g.className += " " + (b ? "" : "no-" ) + a, e[a] = b } return e } , A( "" ), i = k = null , e._version = d, e._prefixes = m, e._domPrefixes = p, e._cssomPrefixes = o, e.mq = x, e.testProp = function (a) { return E([a]) } , e.testAllProps = G, e.testStyles = w, g.className = g.className.replace(/(^|\s)no-js(\s|$)/, "$1$2" ) + (f ? " js " + t.join( " " ) : "" ), e }( this , this .document), Modernizr.addTest( "fullscreen" , function () { for ( var a = 0; a < Modernizr._domPrefixes.length; a++) if (document[Modernizr._domPrefixes[a].toLowerCase() + "CancelFullScreen" ]) return !0; return !!document.cancelFullScreen || !1 }); |
运行测试用例
到此这篇关于html5手写签名的实现示例的文章就介绍到这了,更多相关html5手写签名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
- 这篇文章主要介绍了canvas画布实现手写签名效果的示例代码的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随2019-04-23
- 这篇文章主要介绍了html5 利用canvas手写签名并保存的实现方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-07-12
最新评论