身份证阅读器读卡器网页方法实现身份证的读取，兼容各种浏览器-CSDN博客

本文链接：https://blog.csdn.net/zihan0321/article/details/140751108

大家在使用普天身份证阅读器进行web开发的时候，最烦人的就是浏览器的兼容问题。为此，本人开发了一套普天身份证阅读器Web开发组件，兼容所有浏览器。让身份证阅读器开发变得轻轻松松。

普天身份证阅读器Web开发组件由服务端和web客户端组成。只要服务器启动以后，可以使用任何浏览器进行读卡操作。

确定功能：用户通过连接的身份证阅读器自动读取信息，并在Web页面上展示身份证的基本信息（如姓名、性别、出生日期、身份证号等）。
技术选型：
- 前端：HTML, CSS, JavaScript (使用Vue.js或React.js等现代框架)
- 服务端：.net Framework4.8.0（便于处理HTTP请求和与身份证阅读器交互）
- 身份证阅读器接口：根据设备提供的SDK或API文档进行集成

服务端采用 .net 开发，启动服务后，可以等待用户的刷卡操作。

部分代码：

Int32 result;
String imagePath;
StringBuilder errorText = new StringBuilder(maxErrorTextLen);

if (image != null)
{
    image.Dispose();
    image = null;
}
imagePath = Path.GetTempPath() + "image.bmp";
//当程序打开设备后，可以多次调用读取信息函数。
result = Card2.GetPersonMsgW(ref person, imagePath);
Card2.GetErrorTextW(errorText, maxErrorTextLen);

if (0 == result)
{
    birthday = ConvertDate(person.birthday, 1);
    validDate = ConvertDate(person.validStart, 2) + "-";
    validDate += ConvertDate(person.validEnd, 2);
    image = new Bitmap(imagePath);
}
else
{
    birthday = "";
    validDate = "";
}
Invalidate();
string str = person.address + "<br>" + person.name + "<br>" + person.cardId;
return str;

客户端 HTML 页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>websocket client</title>
    <style>
        .sfz_container{
            width: 500px;
            height: 314px;
            margin: 0 auto;
            background-image: url(./images/sfz_bg.jpg);
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid #ccc;
        }
        .sfz_item{
            position: absolute;            
            font-weight: bold;
            color: #333;
            font-size: 18px;
        }
        .xm{
            top: 43px;
            left: 90px;
        }
        .xb{
            top: 82px;
            left: 90px;
        }
        .mz{
            top: 82px;
            left: 200px;
        }
        .year{
            top: 120px;
            left: 90px;
        }
        .month{
            top: 120px;
            left: 170px;
        }
        .day{
            top: 120px;
            left: 220px;
        }
        .address{
            width: 220px;
            top: 160px;
            left: 90px;
        }
        .sfzh{
            width: 240px;
            top: 258px;
            left: 155px;
            font-size: 24px;
            letter-spacing: 1px;
        }
        .sfz_avator{
            width: 150px;
            height: 185px;
            position: absolute;
            top: 36px;
            left: 317px;
        }
        .container{
            width: 1000px;
            height:314px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }
        .console{
            width: 400px;
            padding: 20px;
            background-color: #2b2b2b;
            border-radius: 10px;
            overflow-y: auto;
            color: #bbbbbb;
        }
    </style>
    <script type="text/javascript">
      var start = function () {
        var inc = document.getElementById("incomming");
        var wsImpl = window.WebSocket || window.MozWebSocket;
        var form = document.getElementById("sendForm");
        var input = document.getElementById("sendText");

        inc.innerHTML += "connecting to server ..<br/>";

        // create a new websocket and connect
        window.ws = new wsImpl("ws://127.0.0.1:8182/");

        // when data is comming from the server, this metod is called
        ws.onmessage = function (evt) {
          inc.innerHTML += evt.data + "<br/>";
        };

        // when the connection is established, this method is called
        ws.onopen = function () {
          inc.innerHTML += ".. connection open<br/>";
        };

        // when the connection is closed, this method is called
        ws.onclose = function () {
          inc.innerHTML += ".. connection closed<br/>";
        };

        form.addEventListener("submit", function (e) {
          e.preventDefault();
          var val = input.value;
          ws.send(val);
          input.value = "";
        });

        var button = document.getElementById("myButton");
        button.addEventListener("click", function (e) {
          e.preventDefault();
          var val = input.value;
          ws.send(val);
          input.value = "";
        });
      };
      window.onload = start;
    </script>
  </head>
  <body>
    <div style="width: 1000px; margin: 0 auto;">
        <form id="sendForm">
        <input id="sendText" placeholder="Text to send" />
        <button id="myButton">读身份证</button>
      </form>
    </div>
    
    <hr /> <br/>   
    <div class="container">
        <div class="console"><pre id="incomming"></pre></div>
        <div class="sfz_container">
            <div class="sfz_item xm">张三丰</div>
            <div class="sfz_item xb">男</div>
            <div class="sfz_item mz">汉族</div>
            <div class="sfz_item year">1981</div>
            <div class="sfz_item month">11</div>
            <div class="sfz_item day">7</div>
            <div class="sfz_item address">河北省石家庄市6栋1单元301号</div>
            <div class="sfz_item sfzh">000000000000000</div>
            <div class="sfz_avator"><img src="./images/avator.jpg" width="150" height="185" alt=""></div>
        </div>
    </div>
  </body>
</html>