Jquery电子签名制作

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

下载jquery库提取码:rd9g

html

@{Layout = null;
}<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><!-- Always force latest IE rendering engine (even in intranet) & Chrome FrameRemove 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="~/lib/jSignature-master/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: 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"><input type="button" value="上传" οnclick="add()" /><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="http://www.jq22.com/jquery/jquery-1.10.2.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="~/lib/jSignature-master/libs/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>'], namefor (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)var datapair = $sigdiv.jSignature("getData", "image");var len = $sigdiv.jSignature('getData', 'native').length;if (len > 0) {$.post("/Test/UploadSignature?dt=" + new Date(),{imgData: datapair[1]}, function (res) {if (res.success) {alert('上传成功!');} else {alert(res.message);}})}else {alert("请先签名")}});$.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>

控制器

 [HttpPost]public async Task<IActionResult> UploadSignature(){string imgData = HttpContext.Request.Form["imgData"].ToString();var result = new Dictionary<string, object>();bool Success = false;string Message = "";try{var dir = @"./wwwroot/Signature/";if (!Directory.Exists(dir))Directory.CreateDirectory(dir);var fileName = Guid.NewGuid();var path = dir + fileName + ".jpg";//using (var fileStream = new FileStream(path, FileMode.Create))//{//    await file.CopyToAsync(fileStream);//    await fileStream.FlushAsync();//}byte[] arr = Convert.FromBase64String(imgData);MemoryStream ms = new MemoryStream(arr);await ms.FlushAsync();System.Drawing.Bitmap bmp = new System.Drawing.Bitmap(ms);bmp.Save(path, System.Drawing.Imaging.ImageFormat.Jpeg);ms.Close();Success = true;Message = path.Replace("./wwwroot", string.Empty);}catch (Exception ex){Success = false;Message = ex.Message;}result.Add("success", Success);result.Add("message", Message);return Json(result);}

转载于:https://www.cnblogs.com/LiChen19951127/p/10932300.html

Jquery电子签名制作_jSignature相关推荐

jquery插件制作
jquery插件丰富,很多都是很好用的,最近学习了一下如何制作jquery插件,发现jquery插件制作其实很简单,这里介绍一下. jquery插件的基本格式: (function($){$.fn.t ...
JQuery插件制作具有动态效果的网页
JQuery插件制作具有动态效果的网页前言 JQuery 今天我给大家介绍一个运用JQuery插件制作的动态网页--iphone 5C 宣传页面.这个网页中运用到了fullpage.js和 ...
html5电子相册在线制作,Html5+jQuery+CSS制作相册小记录
本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录. 主要功能点: Html5进行布局调用jQuery(借用官网的一句话:The Write Less, Do More)极大的简化 ...
酷！使用 jQuery Canvas 制作相机快门效果
在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...
jquery插件制作 -- 3.表单验证
今天的内容是关于表单验证插件的制作.表单验证控件实现的主要功能是,当表单提交的时候检查必填项是否正确填写,同时根据需要验证输入信息是否符合规范. 先下页面代码: <!DOCTYPE html P ...
cad插件制作教程_CAD电子签名制作教程
文尾左下角阅读原文看视频教程好课推荐: 1.CAD2014:点击查看 2.室内CAD:点击查看 3.CAD2019:点击查看4.CAD2018:点击查看5.Bim教程:点击查看6.室内手绘:点击查看 ...
Jquery来制作简易版的留言板.
效果图: 代码如下: <html lang="en"> <head><meta charset="UTF-8"><me ...
Jquery+javascript制作支付网页数字键盘
Jquery+javascript动态生成支付网页数字键盘制作网页支付界面的时候,数字键盘适配不同的屏幕宽高比是一个很麻烦的事,所以我制作了一个根据屏幕宽高动态生成的数字键盘运行截图: 实现代码 ...
jQuery如何制作动画
下面为一组图片(四张)展示 1 2 3 4 页面代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

Jquery电子签名制作_jSignature

Jquery电子签名制作_jSignature相关推荐

最新文章

热门文章