C# ASP.NET 手写板并生成图片保存

前端：

复制代码
@{
    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[0] + "," + datapair[1]);
            });
            $("#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:\\1\\"+ DateTime.Now.ToString("yyyyMMddHHss") + ".png");
            return Json(1, 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(0, savePath.LastIndexOf('\\'));
                    ////FileHelper.CreateDir(folderPath);
                    if (!Directory.Exists(folderPath))
                    {
                        Directory.CreateDirectory(folderPath);
                    }
                    //图片后缀格式
                    var suffix = savePath.Substring(savePath.LastIndexOf('.') + 1,
                        savePath.Length - savePath.LastIndexOf('.') - 1).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;
   
        }
复制代码

 

posted @   Tozhang  阅读(2740)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示