Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to achieve the online signature function of ThinkPhp5.1 + jSignature. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Front-end HTML

.main _ sign {padding: 10px 10px; color:black; background-color:darkgrey;} .main _ sign .sign _ btn {padding: 5px 10px;} # signature {border: 2px dotted black;} rewrite confirmation

1 instantiate jsignature

$(document) .ready (function () {var arguments = {width: '100% signature, height:' 200pxready,}; $("# signature") .jSignature (arguments);})

2 reset signature

$("# reset") .click (function () {$("# signature"). JSignature ("reset"); / / reset the canvas to repaint $("# images"). Attr ('src','');})

3 submit signature

The editor uses TP5.1 + ajax submission [related recommendation: thinkphp video tutorial]

/ / Click the OK button to convert the signature into a picture, then put the data in the picture into the picture, and finally transfer the data in the picture to the background $("# yes") .click (function () {/ / convert the canvas content into a picture var $signature = $("# signature"); var datapair = $signature.jSignature ("getData", "image") $("# images"). Attr ('src',_'data:' + datapair [0] + "," + datapair [1]); var src_data = $("# images"). Attr (' src'); / / get the src in the picture, which is the base64 / / console.info (src_data) we need. / / display the generated handwriting picture / / write our background operation $.ajax ({url: "{: url ('getSignInfo')}", data: {src_data:src_data}, type: "post", dataType: "json", success:function (data) {_ window.location.href = data.dump_url) here }, error:function () {console.log (error);});})

4 background data reception (getSignInfo.php)

$data = Request::param (); $src = $this- > base64ContentToImage ($data ['src_data'], $path)

$src is the address to save the signature image, and $path is the path to save the signature picture.

5 convert a picture Base64 code into a standard picture (base64ContentToImage method)

Public function base64ContentToImage ($base64_image_content,$path) {$dir = ". /". $path; if (! file_exists ($dir)) {mkdir (iconv ("GBK", "UTF-8", $dir), 0777 if);} / / match the format of the picture if ('/ ^ (data:\ s*image\ / (\ w+); base64,) /', $base64_image_content,$ result) {$type = $result [2] $new_file = $path. "/" .date ('Ymd',time ()). / "; if (! file_exists ($new_file)) {/ / check whether the folder exists, if not, create it and give the highest permission mkdir ($new_file, 0700);} $new_file = $new_file.time ().". {$type} " If (file_put_contents ($new_file, base64_decode (str_replace ($result [1],'', $base64_image_content) {return'/'.$ new_file;} else {return false;}} else {return false }} this is the end of the article on "ThinkPhp5.1 + jSignature how to achieve online signature". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.