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:\\Users\\45448\\Desktop\\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;
   
        }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM