C# 结合JavaScript实现手写板签名并上传到服务器-阿里云开发者社区

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

2024-05-06 90

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

应用场景

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

实现效果

笔迹测试显示界面如下：

可选择画笔颜色（默认为黑色笔），在虚线框内可随便写一段文字，点击提交即可。当然程序还提供拍照上传功能，这里不再详述。下面我们开始介绍，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;
}

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

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

应用场景

实现效果

开发运行环境

设计实现

手写功能

前端引用

后端处理

小结

热门文章

最新文章

相关课程

相关电子书

相关实验场景