今天用Jquery的jSignature库制作一个电子签名 后台.net core上传到指定文件夹

下载jquery库 提取码:rd9g

html

  1. @{
  2.     Layout = null;
  3. }
  5. <!DOCTYPE html>
  6. <html lang="en">
  7. <head>
  8.     <meta charset="utf-8">
  9.     <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
  10.        Remove this if you use the .htaccess -->
  11.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  12.     <meta name="viewport" content="initial-scale=1.0, target-densitydpi=device-dpi" /><!-- this is for mobile (Android) Chrome -->
  13.     <meta name="viewport" content="initial-scale=1.0, width=device-height"><!--  mobile Safari, FireFox, Opera Mobile  -->
  14.     <script src="~/lib/jSignature-master/libs/modernizr.js"></script>
  15.     <!--[if lt IE 9]>
  16.     <script type="text/javascript" src="libs/flashcanvas.js"></script>
  17.     <![endif]-->
  18.     <style type="text/css">
  20.         div {
  21.             margin-top: 1em;
  22.             margin-bottom: 1em;
  23.         }
  25.         input {
  26.             padding: .5em;
  27.             margin: .5em;
  28.         }
  30.         select {
  31.             padding: .5em;
  32.             margin: .5em;
  33.         }
  35.         #signatureparent {
  36.             color: darkblue;
  37.             background-color: darkgrey;
  38.             /*max-width:600px;*/
  39.             padding: 20px;
  40.         }
  42.         /*This is the div within which the signature canvas is fitted*/
  43.         #signature {
  44.             border: 2px dotted black;
  45.             background-color: lightgrey;
  46.         }
  48.         /* Drawing the \'gripper\' for touch-enabled devices */
  49.         html.touch #content {
  50.             float: left;
  51.             width: 92%;
  52.         }
  54.         html.touch #scrollgrabber {
  55.             float: right;
  56.             width: 4%;
  57.             margin-right: 2%;
  58.             background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAFCAAAAACh79lDAAAAAXNSR0IArs4c6QAAABJJREFUCB1jmMmQxjCT4T/DfwAPLgOXlrt3IwAAAABJRU5ErkJggg==)
  59.         }
  61.         html.borderradius #scrollgrabber {
  62.             border-radius: 1em;
  63.         }
  64.     </style>
  65. </head>
  66. <body>
  67.     <div>
  68.         <div id="content">
  69.             <input type="button" value="上传" onclick="add()" />
  70.             <div id="signatureparent">
  71.                 <div>jSignature inherits colors from parent element. Text = Pen color. Background = Background. (This works even when Flash-based Canvas emulation is used.)</div>
  72.                 <div id="signature"></div>
  73.             </div>
  74.             <div id="tools"></div>
  75.             <div><p>Display Area:</p><div id="displayarea"></div></div>
  76.         </div>
  77.         <div id="scrollgrabber"></div>
  78.     </div>
  79.     <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  80.     <script type="text/javascript">
  81.         jQuery.noConflict()
  82.     </script>
  83.     <script>
  84. @*/*  @preserve
  85. jQuery pub/sub plugin by Peter Higgins (dante@dojotoolkit.org)
  86. Loosely based on Dojo publish/subscribe API, limited in scope. Rewritten blindly.
  87. Original is (c) Dojo Foundation 2004-2010. Released under either AFL or new BSD, see:
  88. http://dojofoundation.org/license for more information.
  89. */*@
  90. (function($) {
  91.     var topics = {};
  92.     $.publish = function(topic, args) {
  93.         if (topics[topic]) {
  94.             var currentTopic = topics[topic],
  95.             args = args || {};
  97.             for (var i = 0, j = currentTopic.length; i < j; i++) {
  98.                 currentTopic[i].call($, args);
  99.             }
  100.         }
  101.     };
  102.     $.subscribe = function(topic, callback) {
  103.         if (!topics[topic]) {
  104.             topics[topic] = [];
  105.         }
  106.         topics[topic].push(callback);
  107.         return {
  108.             "topic": topic,
  109.             "callback": callback
  110.         };
  111.     };
  112.     $.unsubscribe = function(handle) {
  113.         var topic = handle.topic;
  114.         if (topics[topic]) {
  115.             var currentTopic = topics[topic];
  117.             for (var i = 0, j = currentTopic.length; i < j; i++) {
  118.                 if (currentTopic[i] === handle.callback) {
  119.                     currentTopic.splice(i, 1);
  120.                 }
  121.             }
  122.         }
  123.     };
  124. })(jQuery);
  126.     </script>
  127.     <script src="~/lib/jSignature-master/libs/jSignature.min.noconflict.js"></script>
  128.     <script>
  129.         (function ($) {
  131.             $(document).ready(function () {
  133.                 // This is the part where jSignature is initialized.
  134.                 var $sigdiv = $("#signature").jSignature({ \'UndoButton\': true })
  136.                     // All the code below is just code driving the demo.
  137.                     , $tools = $(\'#tools\')
  138.                     , $extraarea = $(\'#displayarea\')
  139.                     , pubsubprefix = \'jSignature.demo.\'
  140.  
  141.                 var export_plugins = $sigdiv.jSignature(\'listPlugins\', \'export\')
  142.                     , chops = [\'<span><b>提取签名数据: </b></span><select>\', \'<option value="">(select export format)</option>\']
  143.                     , name
  144.                 for (var i in export_plugins) {
  145.                     if (export_plugins.hasOwnProperty(i)) {
  146.                         name = export_plugins[i]
  147.                         chops.push(\'<option value="\' + name + \'">\' + name + \'</option>\')
  148.                     }
  149.                 }
  150.                 chops.push(\'</select><span><b> or: </b></span>\')
  152.                 $(chops.join(\'\')).bind(\'change\', function (e) {
  153.                     if (e.target.value !== \'\') {
  154.                         var data = $sigdiv.jSignature(\'getData\', e.target.value)
  155.                         $.publish(pubsubprefix + \'formatchanged\')
  156.                         if (typeof data === \'string\') {
  157.                             $(\'textarea\', $tools).val(data)
  158.                         } else if ($.isArray(data) && data.length === 2) {
  159.                             $(\'textarea\', $tools).val(data.join(\',\'))
  160.                             $.publish(pubsubprefix + data[0], data);
  161.                         } else {
  162.                             try {
  163.                                 $(\'textarea\', $tools).val(JSON.stringify(data))
  164.                             } catch (ex) {
  165.                                 $(\'textarea\', $tools).val(\'Not sure how to stringify this, likely binary, format.\')
  166.                             }
  167.                         }
  168.                     }
  169.                 }).appendTo($tools)
  172.                 $(\'<input type="button" value="Reset">\').bind(\'click\', function (e) {
  173.                     $sigdiv.jSignature(\'reset\')
  174.                 }).appendTo($tools)
  176.                 $(\'<div><textarea style="width:100%;height:7em;"></textarea></div>\').appendTo($tools)
  178.                 $.subscribe(pubsubprefix + \'formatchanged\', function () {
  179.                     $extraarea.html(\'\')
  180.                 })
  182.                 $.subscribe(pubsubprefix + \'image/svg+xml\', function (data) {
  184.                     try {
  185.                         var i = new Image()
  186.                         i.src = \'data:\' + data[0] + \';base64,\' + btoa(data[1])
  187.                         $(i).appendTo($extraarea)
  188.                     } catch (ex) {
  190.                     }
  192.                     var message = [
  193.                         "If you don\'t see an image immediately above, it means your browser is unable to display in-line (data-url-formatted) SVG."
  194.                         , "This is NOT an issue with jSignature, as we can export proper SVG document regardless of browser\'s ability to display it."
  195.                         , "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."
  196.                     ]
  197.                     $("<div>" + message.join("<br/>") + "</div>").appendTo($extraarea)
  198.                 });
  200.                 $.subscribe(pubsubprefix + \'image/svg+xml;base64\', function (data) {
  201.                     var i = new Image()
  202.                     i.src = \'data:\' + data[0] + \',\' + data[1]
  203.                     $(i).appendTo($extraarea)
  205.                     var message = [
  206.                         "If you don\'t see an image immediately above, it means your browser is unable to display in-line (data-url-formatted) SVG."
  207.                         , "This is NOT an issue with jSignature, as we can export proper SVG document regardless of browser\'s ability to display it."
  208.                         , "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."
  209.                     ]
  210.                     $("<div>" + message.join("<br/>") + "</div>").appendTo($extraarea)
  211.                 });
  213.                 $.subscribe(pubsubprefix + \'image/png;base64\', function (data) {
  214.                     var i = new Image()
  215.                     i.src = \'data:\' + data[0] + \',\' + data[1]
  216.                     $(\'<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)
  217.                     $(i).appendTo($extraarea)
  219.                     var datapair = $sigdiv.jSignature("getData", "image");
  220.                     var len = $sigdiv.jSignature(\'getData\', \'native\').length;
  221.                     if (len > 0) {
  222.                         $.post(
  223.                             "/Test/UploadSignature?dt=" + new Date(),
  224.                             {
  225.                                 imgData: datapair[1]
  226.                             }, function (res) {
  227.                                 if (res.success) {
  228.                                     alert(\'上传成功!\');
  229.                                 } else {
  230.                                     alert(res.message);
  231.                                 }
  232.                             }
  233.                         )
  234.                     }
  235.                     else {
  236.                         alert("请先签名")
  237.                     }
  239.                 });
  241.                 $.subscribe(pubsubprefix + \'image/jsignature;base30\', function (data) {
  242.                     $(\'<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)
  243.                 });
  245.                 if (Modernizr.touch) {
  246.                     $(\'#scrollgrabber\').height($(\'#content\').height())
  247.                 }
  249.             })
  251.         })(jQuery)
  253.     </script>
  254. </body>
  255. </html>

 

控制器

  1.  [HttpPost]
  2.         public async Task<IActionResult> UploadSignature()
  3.         {
  4.             string imgData = HttpContext.Request.Form["imgData"].ToString();
  5.             var result = new Dictionary<string, object>();
  6.             bool Success = false;
  7.             string Message = "";
  8.             try
  9.             {
  10.                 var dir = @"./wwwroot/Signature/";
  11.                 if (!Directory.Exists(dir))
  12.                     Directory.CreateDirectory(dir);
  14.                 var fileName = Guid.NewGuid();
  16.                 var path = dir + fileName + ".jpg";
  18.                 //using (var fileStream = new FileStream(path, FileMode.Create))
  19.                 //{
  20.                 //    await file.CopyToAsync(fileStream);
  21.                 //    await fileStream.FlushAsync();
  22.                 //}
  23.  
  24.                 byte[] arr = Convert.FromBase64String(imgData);
  25.                 MemoryStream ms = new MemoryStream(arr);
  26.                 await ms.FlushAsync();
  27.                 System.Drawing.Bitmap bmp = new System.Drawing.Bitmap(ms);
  28.                 bmp.Save(path, System.Drawing.Imaging.ImageFormat.Jpeg);
  29.                 ms.Close();
  30.                 Success = true;
  31.                 Message = path.Replace("./wwwroot", string.Empty);
  32.             }
  33.             catch (Exception ex)
  34.             {
  35.                 Success = false;
  36.                 Message = ex.Message;
  37.             }
  38.             result.Add("success", Success);
  39.             result.Add("message", Message);
  40.             return Json(result);
  41.         }

 

版权声明：本文为LiChen19951127原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/LiChen19951127/p/10932300.html