前端：

@{

    Layout = null;

}

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <title>手写板签名demo</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <meta charset="UTF-8">

    <meta name="description" content="overview & stats" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <script src="~/Scripts/jquery-3.3.1.min.js"></script>

    <script src="~/Scripts/jSignature/jSignature.min.js"></script>

    <script>

        $(function () {

            var $sigdiv = $("#signature");

            $sigdiv.jSignature(); // 初始化jSignature插件-属性用","隔开

           //  $sigdiv.jSignature({'decor-color':'red'}); // 初始化jSignature插件-设置横线颜色

            // $sigdiv.jSignature({'lineWidth':"6"});// 初始化jSignature插件-设置横线粗细

            // $sigdiv.jSignature({"decor-color":"transparent"});// 初始化jSignature插件-去掉横线

             //$sigdiv.jSignature({'UndoButton':true});// 初始化jSignature插件-撤销功能

             //$sigdiv.jSignature({'height': 100, 'width': 200}); // 初始化jSignature插件-设置书写范围(大小)

            $("#yes").click(function () {

                //将画布内容转换为图片

                var datapair = $sigdiv.jSignature("getData", "image");

                $("#images").attr('src', 'data:' + datapair[] + "," + datapair[]);

            });

            $("#download").click(function () {

                var src_data = $("#images").attr('src');

                // console.log(src);

                if (src_data) {

                    $.ajax({

                        type: "post",

                        url: "/jSignature/UploadSignature2",

                        data: { src_data: src_data },

                        //dataType: "json",

                        //async: false,

                        success: function (data) {

                            // console.log(data);

                            if (data != null) {

                                alert(data);

                                // alert('生成签名成功！');

                            } else {

                                alert('生成失败！');

                            }

                        }

                    });

                } else {

                    alert('图片不能为空！'); return false;

                }

            });

            $("#reset").click(function () {

                $("#signature").jSignature("reset"); //重置画布，可以进行重新作画

                $("#images").attr('src', '');

            });

        });

    </script>

</head>

<body>

    <div id="signature"></div>

    <p style="text-align: center">

        <b style="color: red">请按着鼠标写字签名。</b>

    </p>

    <input type="button" value="保存" id="yes" />

    <input type="button" value="下载" id="download" />

    <input type="button" value="重写" id="reset" />

    <div id="someelement"><img src="" id="images"></div>

</body>

</html>

后台：

    public ActionResult UploadSignature2(string src_data)

        {

            Class1.Base64StrToImage(src_data, "C:\\Users\\45448\\Desktop\\1\\"+ DateTime.Now.ToString("yyyyMMddHHss") + ".png");

            return Json(, JsonRequestBehavior.AllowGet);

        }

        /// <summary>

        /// 将Base64字符串转换为图片并保存到本地

        /// </summary>

        /// <param name="base64Str">base64字符串</param>

        /// <param name="savePath">图片保存地址，如：/Content/Images/10000.png</param>

        /// <returns></returns>

        public static bool Base64StrToImage(string base64Str, string savePath)

        {

            var ret = true;

            try

            {

                base64Str = base64Str.Replace("data:image/png;base64,", "").Replace("data:image/jgp;base64,", "")

                    .Replace("data:image/jpg;base64,", "").Replace("data:image/jpeg;base64,", ""); //将base64头部信息替换

                var bitmap = Base64StrToImage(base64Str);

                if (bitmap != null)

                {

                    //创建文件夹

                    var folderPath = savePath.Substring(, savePath.LastIndexOf('\\'));

                    ////FileHelper.CreateDir(folderPath);

                    if (!Directory.Exists(folderPath))

                    {

                        Directory.CreateDirectory(folderPath);

                    }

                    //图片后缀格式

                    var suffix = savePath.Substring(savePath.LastIndexOf('.') + ,

                        savePath.Length - savePath.LastIndexOf('.') - ).ToLower();

                    var suffixName = suffix == "png"

                        ? ImageFormat.Png

                        : suffix == "jpg" || suffix == "jpeg"

                            ? ImageFormat.Jpeg

                            : suffix == "bmp"

                                ? ImageFormat.Bmp

                                : suffix == "gif"

                                    ? ImageFormat.Gif

                                    : ImageFormat.Jpeg;

                    //这里复制一份对图像进行保存，否则会出现“GDI+ 中发生一般性错误”的错误提示

                    var bmpNew = new Bitmap(bitmap);

                    bmpNew.Save(savePath, suffixName);

                    bmpNew.Dispose();

                    bitmap.Dispose();

                }

                else

                {

                    ret = false;

                }

            }

            catch (Exception ex)

            {

                ret = false;

            }

            return ret;

        }

C# ASP.NET 手写板并生成图片保存的更多相关文章

  1. 微信小程序导出当前画布指定区域的内容并生成图片保存到本地相册(canvas)

    最近在学小程序,在把当前画布指定区域的内容导出并生成图片保存到本地这个知识点上踩坑了. 这里用到的方法是: wx.canvasToTempFilePath(),该方法作用是把当前画布指定区域的内容导出 ...

  2. ASP.Net如何用Cookies保存对象

    在ASP.Net中,有时候考虑到较多的使用Session来保存对象,会增加服务器的负载,所以我们会选择用Cookies来保存对象的状态,而Cookies只能保存字符串,这时,我们可以考虑用序列化操作来 ...

  3. C# html生成图片保存下载

    最近有个需求,需要把内容生成图片,我找到一些资料可以将html页面生成图片并保存下载 下面是简单的实现 1.html页面 @{ Layout = null; } <!DOCTYPE html&g ...

  4. vue 页面生成图片保存

    需求:将页面中的元素转成图片,支持保存或下载.要求下载的图片包含页面背景,头像,用户名,文本为"我的邀请码"和个人二维码. 实现:将页面绘制到canvas中,生成base64图片链 ...

  5. ASP.NET下载远程图片保存到本地的方法、保存抓取远程图片

    以下介绍两种方法:1.利用WebRequest,WebResponse 类 WebRequest wreq=WebRequest.Create("http://www.xueit.com/e ...

  6. asp.net 生成 excel导出保存时， 解决迅雷下载aspx页面问题

    网络上搜索,一大堆废话,以下为简单的导出生成Excel代码: string excelFile = Server.MapPath("~/SB/UpFile/20151104111008/Bo ...

  7. andrid 上传图片 asp.net 后台接收并保存

    android 端代码 package com.example.uploadfile; import java.io.DataOutputStream; import java.io.File; im ...

  8. ASP.NET实现头像剪切保存

    利用swfupload上传头像,利用Jcrop来实现头像在线选择,然后提交个ashx对原头像进行剪切.代码如下: default.aspx: <%@ Page Language="C# ...

  9. asp.net 根据连接地址保存文件，图片

    第一种方式  下载图片,文件 WebClient my = new WebClient(); string url = "http://localhost:1015/resource/loa ...

随机推荐

  1. java调用存储过程的方式

    1.问号是入参和出参,出参要指定类型 CallableStatement pstmt = conn.prepareCall("{call dbo.UP_CodeUp_***(?,?,?,?, ...

  2. 【bzoj2002】弹飞绵羊

    题目 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一条直线摆上n个装置,每个装置设定初始弹力系数k ...

  3. UI Recorder安装与使用

    现在的互联网公司,普遍在尝试并执行敏捷开发模式,那么必然要涉及到频繁的更新迭代,在每次更新迭代时,老功能的回归成为了老大难.当系统日益复杂,涉及到的回归点逐渐增多,UI自动化测试即使成本在大,也需要提 ...

  4. linux运维、架构之路-redis集群

    一.介绍            redis cluster 3.0之后的功能,至少需要3(Master)+3(Slave)才能建立集群,是无中心的分布式存储架构,可以在多个节点之间进行数据共享,解决了 ...

  5. jquery +点击按钮，切换div内容,按钮加高亮

    html: <div class="dw4"> <span class="dw">单位(次)</span> <div ...

  6. vim插件cscope使用方法

    一.安装cscope 安装方式比较多样,可以在各自linux软件管理工具中安装,也可以去官网下载安装. sudo apt-get install cscope 二.插件安装 这里选择的是Vundle来 ...

  7. makefile 赋值

    = 是最基本的赋值:= 是覆盖之前的值?= 是如果没有被赋值过就赋予等号后面的值+= 是添加等号后面的值

  8. 修改select的默认样式

    在我们用select的时候,通常因为他的默认样式比较丑而用自己样式,那首先要去掉他的默认样式 去掉select的边框和点击时的蓝色边框 select{border: none;outline: non ...

  9. TensorFlow 源码编译安装

    ## Install prerequisites (rhel) yum install numpy python-devel python-wheel python-mock ## Install B ...

  10. selinux 了解2

    凡是对内核级, 如selinux的修改, 不只是对软件, 程序的修改, 那么修改之后都要重新启动. 针对windows下的截图, 像linux下的screenshot截图那样设置快捷键 shift+s ...