Jquery电子签名制作_jSignature
今天用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 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="~/lib/jSignature-master/libs/modernizr.js"></script>
<!--[if lt IE ]>
<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: %;
}
html.touch #scrollgrabber {
float: right;
width: %;
margin-right: %;
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="上传" onclick="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 = , 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 = , j = currentTopic.length; i < j; i++) {
if (currentTopic[i] === handle.callback) {
currentTopic.splice(i, );
}
}
}
};
})(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>']
, 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 === ) {
$('textarea', $tools).val(data.join(','))
$.publish(pubsubprefix + data[], 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[] + ';base64,' + btoa(data[])
$(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[] + ',' + data[]
$(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[] + ',' + data[]
$('<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 > ) {
$.post(
"/Test/UploadSignature?dt=" + new Date(),
{
imgData: datapair[]
}, 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);
}
Jquery电子签名制作_jSignature的更多相关文章
- 使用 jQuery & CSS3 制作美丽的照片画廊
在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...
- 学习使用 jQuery & CSS3 制作照片堆栈效果
在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...
- jQuery & CSS 制作金属质感的选择按钮
如果能把 CSS 运用好,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一组结合 jQuery & CSS 制作的充满金属质感的选择框效果,绝对是超级精美的效果. 在线演 ...
- 酷！使用 jQuery & Canvas 制作相机快门效果
在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...
- jQuery手风琴制作
jQuery手风琴制作 说起手风琴,想必大家应该都知道吧,简单的来说就是可以来回收缩的这么一个东西,接下来,我就给大家演示一下用jQuery制作一个手风琴菜单! 写jQuery前,我们需要引用一个jQ ...
- JQuery插件制作动态网页
运用JQuery插件制作动态网页 前 言 JQuery 今天我给大家介绍一个运用JQuery插件制作的动态网页--iphone 5C 宣传页面.这个网页中运用到了fullpage.js和move ...
- jQuery插件制作之全局函数用法实例
原文地址:http://www.jb51.net/article/67056.htm 本文实例讲述了jQuery插件制作之全局函数用法.分享给大家供大家参考.具体分析如下: 1.添加新的全局函数 所谓 ...
- jQuery插件制作方法详解
jQuery插件制作方法详解 jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了. ...
- Jquery.Treeview+Jquery UI制作Web文件预览
效果图: 前台Html: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="D ...
随机推荐
- Mail.Ru Cup 2018 Round 2 B. Alice and Hairdresser （bitset<> or 其他）
传送门 题意: 给出你序列 a,在序列 a 上执行两种操作: ① 0 :查询有多少连续的片段[L,...,R],满足 a[L,...,R] > l: ② 1 p d :将第 p 个数增加 d: ...
- 2018-8-10-win10-uwp-绘图--Line-控件使用
title author date CreateTime categories win10 uwp 绘图 Line 控件使用 lindexi 2018-08-10 19:16:51 +0800 201 ...
- linux 系统挂起
尽管内核代码的大部分 bug 以 oops 消息结束, 有时候它们可能完全挂起系统. 如果系 统挂起, 没有消息打印. 例如, 如果代码进入一个无限循环, 内核停止调度,[15]15 并且系 统不会响 ...
- 负margin的原理及应用
在很多布局中我们经常能够见到类似于margin:-10px;的用法,我们对正值的用法早已熟悉的不能再熟悉了,可是这负值到底有何用呢?听我给你吹. 负margin——普通文档流 普通文档流元素(不浮动, ...
- vue-learning：38 - router - 前端路由的发展
前端路由的发展 参考博客 前端路由是什么东西? 什么是路由 在jQuery时代,我们使用<a href="https://www.example.com/example/home.ht ...
- ASP.NET MVC 实现页落网资源分享网站+充值管理+后台管理（1）之数据库设计
本文主要讲解本项目网站所应用到的知识点,及数据库的相关设计: 一.知识点 (1)本项目主要采取ASP.NET MVC的编程模式,相信你已经了解到了MVC的具体含义是什么,这里不再赘述,有不了解的朋友, ...
- C# 已知点和向量，求距离的点
已知一个点 P 和向量 v ,求在这个点P按照向量 v 运行距离 d 的点 B . 已经知道了一个点 P 和他运动方向 v ,就可以通过这个求出距离点 P 为 d 的点 B. 首先把 v 规范化,规范 ...
- mysql高可用解决方案
浅谈mysql主从复制的高可用解决方案 1.熟悉几个组件(部分摘自网络)1.1.drbd —— DRBD(Distributed Replicated Block Device),DRBD号称 ...
- redis分布式锁使用方法
引用: StackExchange.Redis.dll Redlock.CSharp.dll RedLock.dll 代码: public class RedlockHelper { public v ...
- Redis安装（单机及各类集群，阿里云）
Redis安装(单机及各类集群,阿里云) 前言 上周,我朋友突然悄悄咪咪地指着手机上的一篇博客说,这是你的博客吧.我看了一眼,是之前发布的<Rabbit安装(单机及集群,阿里云>.我朋友很 ...