Jquery电子签名制作

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

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 ...

随机推荐

java throw
自行抛出一个异常对象,抛出异常类的对象: 若throw抛出的是Runtime异常: 程序可以显示使用try...catch来捕获并处理,也可以不管,直接交给方法调用者处理: 若throw抛出Check ...
Vue 中的过滤器的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
es6—变量的解构赋值
数组的解构赋值 ]]]]]]] = []}} = {}} = {}})]: first]: last} = arr} = {}) {}))}))}) {}))}))].]]]])})] }}} = { ...
P1071 01字符串的交叉安排
题目描述你有 \(n(1 \le n \le 10^6)\) 个字符'0' 和 \(m(1 \le m \le 10^6)\) 个字符'1'.你需要使用这些字符拼接成一个01字符串,使得满足如下两个 ...
P1046 阶乘
题目描述给你一个数N,求 \(N!\) (即:N的阶乘).\(N! = N \times (N-1) \times \dots \times 2 \times 1\) 输入格式输入一个整数 \(N ...
H3C 根据子网数划分子网
addEventListener() 方法，事件监听（去哪儿网用到过）
addEventListener() 方法,事件监听你可以使用 removeEventListener() 方法来移除事件的监听. 语法 element.addEventListener(event ...
AutoHotKey 用打码的快捷键
本文告诉大家如何使用 AutoHotKey 将 - 键默认输入的时候是下划线,因为使用下划线在写代码的时候是用在私有字段,而 - 很少使用我打码经常需要使用下划线_而下划线需要按shift+- 两个 ...
Resharper 去掉注释拼写
最近在 Resharper 的 2018.2.1 的版本,提供了单词拼写功能,如果自己写错了单词,可以在 Resharper 提示 Resharper 的拼写在 Resharper 的 2018.2 ...
第二阶段：2.商业需求文档MRD：2.MRD-目标市场分析
版本管理的变更人,属性,时间以及审核人都要严格的写清楚. MRD主要面向的是参与这个需求同级别的同时或主管,让大家更好的了解这个产品的各个方面,达成共识. 现在互联网的发展周期很短,不需要看4.5年, ...

Jquery电子签名制作_jSignature

Jquery电子签名制作_jSignature的更多相关文章

随机推荐

热门专题