C# 结合JavaScript实现手写板签名并上传到服务器
创始人
2025-01-20 05:33:27
0

应用场景

我们最近开发了一款笔迹测试功能的程序(测试版),用户在手写板上手写签名,提交后即可测试出被测试者的心理素质评价分析。类似功能的场景还比如,在银行柜台办理业务,期间可能需要您使用手写设备进行签名并确认;保险续期小程序,到期后需要你在确认续期条款后,在手机上提供的签名区域进行签名并提交确认。

实现效果

笔迹测试显示界面如下:

可选择画笔颜色(默认为黑色笔) ,在虚线框内可随便写一段文字,点击提交即可。当然程序还提供拍照上传功能,这里不再详述。下面我们开始介绍,C#如何结合JavaScript实现手写板写字并上传到服务器进行处理。

开发运行环境

操作系统: Windows Server 2019 DataCenter

手写触屏设备:Microsoft Surface Pro 9

.net版本: .netFramework4.0 或以上

开发工具:VS2019  C#

设计实现

手写功能

设计采用了 iframe 嵌入式的方式实现 JavaScript 前端,假设页面为 hw.aspx ,该页面实现了手写功能、重写功能、画笔选择功能和提交功能,其完整示例代码如下:

                 手写板           

该页面需要引用 jquery-3.3.1.min.js ,可下载我的链接资源:

https://download.csdn.net/download/michaelline/89226046

前端引用

前端页面除嵌入手写功能页面外,iframe的父窗口需要放置两个元素,一个用于存储手写提交后的Base64数据的 Asp.net 服务器按钮文本框元素,另一个是用于模拟调用服务器事件的 Asp.net 服务器按钮元素。

引用代码如下:

后端处理

手写功能中的提交执行代码将调用如下:

window.parent.document.getElementById('pbase64').value = image; window.parent.document.getElementById('phw').click();

其中 pbase64 和 phw 控件为服务器控件,可直接模拟调用 phw 按钮的服务器 click,在这之前其还可以自动处理 OnClientClick事件以显示等待界面。请注意 waittip() 执行了一段 javascript 脚本,如下:

function waittip() {      layer.open({ type: 2, shadeClose: false, content: '正在分析,请稍候...' }); }

 这其中引入了 Layer 弹出层技术,关于 Layer 弹层组件请参照我的文章《改造 layer 弹层移动版组件》,下载JS请访问如下链接:

https://download.csdn.net/download/michaelline/88406984

这是调用服务器Click的事件处理代码,将上传的Base64图片转为两种格式的图片文件(PNG和JPEG)。代码如下:

    protected void phw_Click(object sender, EventArgs e)     {         string mtfilename = "d:\\hw_" + System.Guid.NewGuid().ToString() + ".png";         string mtfilename2 = "d:\\hw_" + System.Guid.NewGuid().ToString() + ".jpg";         string dummyData = pbase64.Text.Trim().Replace("data:image/png;base64,", "");                                        Base64StringToImage(dummyData, mtfilename);         if (File.Exists(mtfilename)==false)         {             base64.ImageUrl = dummyData;             layer.open("保存手写图片失败,请重试并提交。" , "'确定'", "error");             return;         }         System.Drawing.Image img =  System.Drawing.Image.FromFile(mtfilename);         using (var b = new System.Drawing.Bitmap(img.Width, img.Height))         {             b.SetResolution(img.HorizontalResolution, img.VerticalResolution);              using (var g = System.Drawing.Graphics.FromImage(b))             {                 g.Clear(System.Drawing.Color.White);                 g.DrawImageUnscaled(img, 0, 0);             }             b.Save(mtfilename2, System.Drawing.Imaging.ImageFormat.Jpeg);         }     } 

小结

本示例中的前后端代码仅为展示参考,手写功能在支持触屏的设备可以支持手写,也可以用鼠标进行模拟。

服务器调用示例中需要使用 Base64StringToImage(dummyData, mtfilename); 方法由Base64数据转化为图片文件,代码如下:

public bool Base64StringToImage(string strbase64, string outputFilename) {         byte[] arr = Convert.FromBase64String(strbase64);        MemoryStream ms = new MemoryStream(arr);        System.Drawing.Image img = System.Drawing.Image.FromStream(ms);        img.Save(outputFilename);        img.Dispose();        if (File.Exists(outputFilename))        {            return true;        }         return false; }

感谢您的阅读,希望本文能够对您有所帮助。

相关内容

热门资讯

10分钟辅助挂!搜圈麻将假不假... 10分钟辅助挂!搜圈麻将假不假“详细透视辅助助手教程”原来真的有挂,您好,搜圈麻将假不假这款游戏可以...
记者发布!福建十三水 辅助器(... 记者发布!福建十三水 辅助器(透视)透视辅助神器(2023已更新)(哔哩哔哩);1、福建十三水 辅助...
6分钟实锤!博雅红河棋盘外 挂... 您好,博雅红河棋盘外 挂这款游戏可以开挂的,确实是有挂的,需要了解加微【757446909】很多玩家...
八分钟辅助挂!微乐陕西麻将小程... 八分钟辅助挂!微乐陕西麻将小程序有猫腻吗“详细透视辅助脚本教程”原来真的有挂1、下载好微乐陕西麻将小...
必备科技!多乐够级捕鱼辅助软件... 必备科技!多乐够级捕鱼辅助软件(透视辅助)透明挂透视辅助挂(2023已更新)(哔哩哔哩)1、多乐够级...
让我来分享经验!胖猪竞技有外挂... 让我来分享经验!胖猪竞技有外挂没(辅助)确实存在有挂(2026已更新)(哔哩哔哩)胖猪竞技有外挂没辅...
七分钟攻略!七彩云南游戏有外 ... 七分钟攻略!七彩云南游戏有外 挂吗,wePoke原来真的是有挂,wpk教程(有挂细节)1)七彩云南游...
交流学习经验!老友广东麻将来牌... 交流学习经验!老友广东麻将来牌规律(透视)外挂透视辅助插件(2024已更新)(哔哩哔哩)1、在老友广...
13钟辅助挂!闲来贵州麻将可以... 13钟辅助挂!闲来贵州麻将可以挂吗“详细透视辅助app教程”原来真的有挂是一款可以让一直输的玩家,快...
9分钟攻略!乐乐上海麻将有没有... 9分钟攻略!乐乐上海麻将有没有挂,impoker本来有挂,黑科技教程(有挂教程)乐乐上海麻将有没有挂...