Effect:
The image is saved to the server in PNG format, usually about 10K.
This works with H5app, H5, or PC web (IE9 +, canvas supported),
Low-end Android phones are still not supported. To what extent has not been tested.
Here is the code, front-end HTML:
<! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <! --<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/libs/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: #000; background-color: #fff; /*max-width:600px; */ padding: 10px; width: 100%; } /*This is the div within which the signature canvas is fitted*/ #signature { border: 1px dotted #3eaed2; background-color: #ececec; height: 200px; width: 100%; } /* 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/DfwAPLgOXlrt3IwAAAABJRU5Er kJggg==) }*/ html.borderradius #scrollgrabber { border-radius: 1em; } .signature .jSignature{height: 100%; } </style> </head> <body style="background-color: #fff;" > <div id="content" style="width: 100%;" > <p> Note: server-side thinkPHP, here is only a controller, use alone invalid, if you do not know where the controller should be placed, please baidu. Self-concatenate the complete URL of the requesting server. </p> <p style="padding-left: 10px; margin-top:10px; margin-bottom: 5px;" > Please sign your name in the dotted box and click "Save". </p> <div id="signatureparent"> <div id="signature"></div> </div> <div style="text-align: center;" <input type="button" name="btnReset" id="btnReset" value=" rewrite "/> <input type="submit" class="" name="btnSave" Id ="btnSave" value=" save signature "/> </div> </div> <script SRC ="libs/jquery1.10.2.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); </script> <script> /* @preserve jQuery pub/sub plugin by Peter Higgins ([email protected]) 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="libs/jSignature.min.noconflict.js"></script> <script> (function($) { $(document).ready(function() { // This is the part where jSignature is initialized. var $sigdiv = $("#signature").jSignature({ 'UndoButton': false }), // All the code below is just code driving the demo. $tools = $('#tools'), $extraarea = $('#displayarea'), pubsubprefix = 'jSignature.demo.' var export_plugins = $sigdiv.jSignature('listPlugins', 'export'); $(" # btnSave ") on (" click ", function () {/ / optional formats: native, image, base30, image/jsignature; base30,svg,image/svg+xml,svgbase64,image/svg+xml; base64 var basedata = "data:"+$sigdiv.jSignature('getData', "image"); // console.log("basedata:"+basedata); // $(".signResult").html(data); / / server is my custom, value is HTTP: / / http://www.abc.com/index.php?g=user&m=jk / / so you can joining together complete the request path. var weburl=server+"&a=make_sign"; var jsdata={imgbase:basedata}; $.ajax({ type:"post", url:weburl, async:true, data:jsdata, dataType:"json", success:function(data){ console.log(JSON.stringify(data)); if(data.success){ console.log(data.msg); } else{ console.log(data.msg); }}}); // if(data.length<100){// If (data.length<100){// If (data.length<100){// If (data.length<100){// If (data.length<100){// If (data.length<100){// If (data.length<100){ / /}}); $("#btnReset").on("click",function(){ $sigdiv.jSignature('reset'); }); }) })(jQuery) </script> </body> </html>Copy the codeThinkphp is used on the server:
<? php namespace User\Controller; use Common\Controller\HomebaseController; class JkController extends HomebaseController { function make_sign(){ $host=$_SERVER['HTTP_HOST']; $base64=I(" imgBase "); $result=$this->base64_upload($base64); if($result! ==false){ $signUrl=$host.$result; = '{$RTN "success" : true, "MSG" : "successfully saved", "signurl" : "http://'. $signurl. ' '} '; } else{$RTN ='{"success":false," MSG ":" failed "}'; } echo $rtn; Function base64_upload($base64) {$base64_image = str_replace(' ', '+', $base64); // If the data is not from the post, comment out the line. // If the data is not from the POST, comment out the line. Don't take + if replaced with Spaces (preg_match (' / ^ (data: image \ \ s * / (\ w +); Base64,)/', $base64_image, $result)) {/ / match the if ($result [2] = = 'jpeg') {$image_name = uniqid () 'JPG'; }else{$image_name = uniqid().'.'.$result[2]; } $img_url="/Uploads/".date("Ymd")."/"; // The directory must have writable permission, usually give user full permission. if(! is_dir("./".$img_url)){ mkdir("./".$img_url); } $image_file = $img_url.$image_name; If (file_put_contents(".".$image_file, base64_decode(str_replace($result[1], ''), $base64_image)))){ return $image_file; }else{ return false; } }else{ return false; }}}Copy the codeThis is the controller. I don’t have to go into details.
Note: in the demo, there is one change that needs to be made, which is the controller line 33 and 34./ before the path to point to the root directory.
Modified as follows:
if(! is_dir("./".$img_url)){ mkdir("./".$img_url); }Copy the codeComplete demo download path: download.csdn.net/download/mo…
Js plugin source: www.jq22.com/jquery-info…