前端：
@{ 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; }