C# 结合JavaScript实现手写板签名并上传到服务器

这篇具有很好参考价值的文章主要介绍了C# 结合JavaScript实现手写板签名并上传到服务器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

应用场景

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

实现效果

笔迹测试显示界面如下:

C# 结合JavaScript实现手写板签名并上传到服务器,UI专栏,c#,javascript,服务器,.net,asp.net,前端,后端

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

开发运行环境

操作系统: Windows Server 2019 DataCenter

手写触屏设备:Microsoft Surface Pro 9

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

开发工具:VS2019  C#

设计实现

手写功能

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes"/>
    <title>手写板</title>
    <style type="text/css">
        html,body{
            margin: 0;
            padding: 0;
        }
        .saveimg{
            text-align: center;
        }
        .saveimgs span{
            display: inline-block;
            margin-top:5px;
        }
    </style>
</head>
<body>
 <script src="jquery-3.3.1.min.js"></script>

<div align="center">
    <canvas id="myCanvas" width="500" height="300" style="border:1px dotted #6699cc"></canvas>
    <div class="control-ops control">
        <button type="button" class="btn btn-primary" onclick="javascript:clearArea();return false;">重写</button>
        <select style="display:none" id="selWidth" onchange="aaa()">
        <option value="1">1</option>
        <option value="3" selected="selected">3</option>
        <option value="5">5</option>
        <option value="7">7</option>
        <option value="9">9</option>
        <option value="11">11</option>
    </select>
        <select id="selColor" onchange="aaa2()">
        <option value="black" selected="selected">黑色笔</option>
        <option value="blue">蓝色笔</option>
        <option value="red">红色笔</option>
        <option value="green">绿色笔</option>
        <option value="yellow">黄色笔</option>
        <option value="gray">深灰笔</option>
    </select>
        <button type="button" class="saveimg" onclick="javascript:saveImageInfo();return false;">提交</button>
    </div>
    <div class="saveimgs"></div>
</div>
 
</body>
 
<script type="text/javascript">
    var mousePressed = false;
    var lastX, lastY;
    var ctx = document.getElementById('myCanvas').getContext("2d");
    var c = document.getElementById("myCanvas");
    var control = document.getElementsByClassName("control")[0];
    var saveimgs = document.getElementsByClassName("saveimgs")[0];

    window.onload = function () {
        document.getElementById('myCanvas').setAttribute("width", $(window).width()-5);
        InitThis();
    }
 
    function saveImageInfo(){
        var image = c.toDataURL("image/png");
        window.parent.document.getElementById('pbase64').value = image;
        window.parent.document.getElementById('phw').click();

        return;
        var ctximg = document.createElement("span");
        ctximg.innerHTML = "<img src='"+image+"' alt='from canvas'/>";
        if(saveimgs.getElementsByTagName('span').length >= 1){
            var span_old = saveimgs.getElementsByTagName("span")[0];
            saveimgs.replaceChild(ctximg,span_old)
        }
        else{
            saveimgs.appendChild(ctximg);
        }
    }
 
 
    var selected1,selected2;
    function aaa(){
        var sel = document.getElementById('selWidth');
        var value = sel.selectedIndex;
        return selected1 = sel[value].value;
    }
    function aaa2(){
        var sel2 = document.getElementById('selColor');
        var value = sel2.selectedIndex;
        return selected2 = sel2[value].value;
    }
 
    function InitThis() {
//          触摸屏
        c.addEventListener('touchstart', function (event) {
            console.log(1)
            if (event.targetTouches.length == 1) {
                event.preventDefault();// 阻止浏览器默认事件,重要
                var touch = event.targetTouches[0];
                mousePressed = true;
                Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, false);
            }
 
        },false);
 
        c.addEventListener('touchmove', function (event) {
            console.log(2)
            if (event.targetTouches.length == 1) {
                event.preventDefault();// 阻止浏览器默认事件,重要
                var touch = event.targetTouches[0];
                if (mousePressed) {
                    Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, true);
                }
            }
 
        },false);
 
        c.addEventListener('touchend', function (event) {
            console.log(3)
            if (event.targetTouches.length == 1) {
                event.preventDefault();// 阻止浏览器默认事件,防止手写的时候拖动屏幕,重要
                mousePressed = false;
            }
        },false);
        /*c.addEventListener('touchcancel', function (event) {
            console.log(4)
            mousePressed = false;
        },false);*/
 
 
 
//         鼠标
        c.onmousedown = function (event) {
            mousePressed = true;
            Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, false);
        };
 
        c.onmousemove = function (event) {
            if (mousePressed) {
                Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, true);
            }
        };
 
        c.onmouseup = function (event) {
            mousePressed = false;
        };
    }
 
    function Draw(x, y, isDown) {
        if (isDown) {
            ctx.beginPath();
            ctx.strokeStyle = selected2;
            ctx.lineWidth = selected1;
            ctx.lineJoin = "round";
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(x, y);
            ctx.closePath();
            ctx.stroke();
        }
        lastX = x; lastY = y;
    }
 
    function clearArea() {
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 
        // 清除签名图片
        if(saveimgs.getElementsByTagName('span').length >= 1){
            var clearImg = saveimgs.getElementsByTagName('span')[0];
            saveimgs.removeChild(clearImg);
        }
 
    }
</script>
 
</html>

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

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

前端引用

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

引用代码如下:

<div  style=" text-align:center">
   <iframe width="520" height="350" id="hw" runat="server" scrolling="no" frameborder="0" src="/cc/module/hw/hw.aspx" ></iframe>
    <asp:TextBox ID="pbase64" TextMode="MultiLine" style="display:none" runat="server" ></asp:TextBox>
    <asp:button ID="phw" OnClientClick="waittip()" text="后台处理" runat="server" style="display:none" onclick="phw_Click" />
</div>

后端处理

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

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;
}

感谢您的阅读,希望本文能够对您有所帮助。文章来源地址https://www.toymoban.com/news/detail-861791.html

到了这里,关于C# 结合JavaScript实现手写板签名并上传到服务器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Html+JavaScript实现手写签名

    Hello各位,本葡萄又来啦,今天遇到的场景是这样的:在日常业务流程中,经常需要某一流程环节中相关责任人员进行审批签字,早期许多公司为了省事就直接会把这位负责人的签名以键盘打字(楷体)的形式打印出来,但是这样的坏处就是会导致所有的负责人的签名都是一

    2024年02月12日
    浏览(12)
  • JavaScript实现手写签名,可触屏手写,支持移动端与PC端双端保存

    1.HTML模板 2.获取DOM元素和定义变量 3.创建两个canvas元素,并设置它们的宽度和高度 4.绑定触摸事件:touchstart, touchmove, touchend和click 5.实现触摸事件回调函数:startDrawing, draw和stopDrawing 6.实现绘制线段的函数:drawLine 7.实现清除签名的函数:clearSignature 8.实现保存签名的函数:

    2024年01月16日
    浏览(15)
  • 原生微信小程序实现手写签名功能

    项目中有遇到在小程序上实现手动签名功能,今天给大家分享下代码 wxml 文件代码如下,catchtouchmove属性一定要加上,否则移动起来连笔非常不流畅 wxss代码 js代码 效果如下

    2024年02月16日
    浏览(10)
  • 微信小程序用 canvas 实现手写签名弹框(全网最最最详细!!)

    🌸点击弹出手写签名面板事件 🌸手写签名面板 Popup 弹出层( vant ) 🌸最后可以使用 canvas 组件的 toTempFilePath 方法将 canvas 画布内容保存为临时文件路径,然后将该路径传递给后端即可。 💡 文中触摸板的方法中多次获取 canvas 的上下文,即 const context = wx.createCanvasContext(\\\'

    2024年02月05日
    浏览(15)
  • 微信小程序canvas实现简易手写签名版(uni-app)

    微信小程序可以通过canvas实现手写签名的效果,本文中使用的是微信小程序Canvas 2D接口 本示例中绘制的是横屏签名的效果,效果图如下: 这里我们需要调整canvas的物理宽高,默认物理宽高为300*150px,物理宽高调整通过css样式即可,本文中需要根据屏幕高度进行动态调整,使

    2024年02月12日
    浏览(20)
  • uniapp - 实现微信小程序电子签名板,横屏手写姓名签名专用写字画板(详细运行示例,一键复制开箱即用)

    实现了在uniapp项目中,微信小程序平台流畅的写字签名板(也可以绘图)功能源码,复制粘贴,改改样式几分钟即可搞定! 支持自动横屏、持预览,真机运行测试非常流畅不卡顿。 如下代码所示。

    2024年02月16日
    浏览(39)
  • C# 实现电子签名

    本项目基于Emgu.CV(C#下OpenCv的封装)开发的,编译器最新版Vs2022,编译环境x86 直接看效果图 1.主页面 2.我们先看手写的方式: 点击确认就到主界面,如下 : 点击自动适配-,再点击生成: 放大看   点击保存即可,生成透明电子签名图片。 3.在单色背景下手写名字,导入图片

    2024年02月09日
    浏览(8)
  • javaScript手写专题——实现instanceof/call/apply/bind/new的过程/继承方式

    目录 原型链相关 手写instanceof 实现一个_instance方法,判断对象obj是否是target的实例  测试  手写new的过程 实现一个myNew方法,接收一个构造函数以及构造函数的参数,返回构造函数创建的实例对象 测试myNew方法 手写类的继承 ES6:class+extends实现继承 组合继承:调用两次父类

    2024年04月14日
    浏览(14)
  • 微信小程序手写签名

    wxml js wxss 开启横屏 json

    2024年02月08日
    浏览(12)
  • h5手写签名示例

    业务中需要用户进行签字,如何让用户在手机端进行签字? 示例如下 代码已分享至Gitee: https://gitee.com/lengcz/qianming 原示例: https://www.jq22.com/jquery-info13488 创建一个html页面 modernizr.js 运行测试用例

    2024年02月11日
    浏览(8)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包