<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0029)http://127.0.0.1/demo.htm -->
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
<meta name="Keywords" content="二代,身份证,阅读,控件,通用,演示,OCX,生僻字,读卡,居民,IDCard">
<meta name="Robots" content="all">
<meta name="Author" content="王其泳">
<title>IDCardWeb 用户自助阅读身份证语音向导示例</title>
<style>
	body {margin: 50px;}
	img {border: 0px; vertical-align: middle; margin: 0px;}
	a {margin-right:10px;}
	table {color:#333;  font-size: 10.5pt; width: 700px; border-collapse: collapse;}
	th	{padding: 3px; font-weight: normal; text-align: right; border: 1px solid #eed; width: 100px; color: #0088aa; font-size:9pt;}
	td	{padding: 3px; border: 1px solid #eed;}
	input {padding:2px; height: 25px; width: 100%;}
	button {padding:2px 10px; height:30px; width: 100px;}
	#pic {width: 130px; padding:0px; text-align:center;}
	.obj {margin: 20px 0; width:700px; height:40px; background:#c0dce7;}
	.onMsg 	{float:left; width:540px; height:20px; line-height:20px; padding: 0 10px; text-align: left; font-size: 9pt; background: #c0dce7; color:#333; font-family:Arial;}
	.about {clear:both; font-size:10.5pt; width:700px; line-height: 120%;}
	.idc {clear:both; margin: 20px 0; width:700px;}
	.idc table {color:#333;  font-size: 10.5pt; width: 100%; border-collapse: collapse;background: #fff; }
	.idc th	{padding: 8px; font-weight: normal; text-align: center; border: 1px solid #fff; width: 50px; color: #0088aa; font-size:9pt;}
	.idc td	{padding: 8px; border: 1px solid #fff;}
	.idc img {border: 0px; vertical-align: middle; margin: 0px;}
	.demolink {padding: 20px 0;font-size:9pt; line-height:180%;}
</style>
</head>
<body>
<h2>IDCardWeb 用户自助阅读身份证语音向导示例</h2>
<h4>※ 本页面需要安装中文语音库才可以测试语音。中文语音库：http://pan.baidu.com/s/1c2oc5TA 提取密码:vh1g，解压密码：IDCardWeb</h4>

<div id=obj class=obj>
	<div style="float:left; width:135px;">
		<!-- IDCardWeb控件区开始 -->
		<OBJECT ID="ieIdc" 
				CLASSID="clsid:63CAB467-5BB8-4CB2-8C87-C8F3B66040C0"
				style="vertical-align: middle; width:134px; height:40px;" >
			<embed id="myIdc"
				TYPE="application/x-pt-idcardweb"
				style="vertical-align: middle; width:134px; height:40px;"
				event_OnRead="onRead"
				event_OnStatus="onStatus"
				event_OnMessage="onMessage" >
		</OBJECT>
		<script for="ieIdc" event="OnRead()">onRead();</script>
		<script for="ieIdc" event="OnStatus(State, Msg)">onStatus(State,Msg);</script>
		<script for="ieIdc" event="OnMessage(Msg)">onMessage(Msg);</script>
		<!-- IDCardWeb控件区结束 -->
	</div>
	<div id="idcMsg" class=onMsg>消息 >></div>
	<div id="idcStatus" class=onMsg>状态 >></div>
</div>

<form name="up" id="up" action="" method="post">
<table>
	<tr><th>姓名</th><td><input type="text" id="IDName" name="IDName" value=""/></td><td rowspan=5 id="pic"></td></tr>
	<tr><th>身份证号</th><td><input type="text" id="IDCardNo" name="IDCardNo" value=""/></td></tr>
	<tr><th>性别</th><td><input type="text" id="idSex" name="idSex" value=""/></td></tr>
	<tr><th>民族</th><td><input type="text" id="idNation" name="idNation" value=""/></td></tr>
	<tr><th>出生日期</th><td><input type="text" id="idBorn" name="idBorn" value=""/></td></td></tr>
	<tr><th>住址</th><td><input type="text" id="idAddress" name="idAddress" value=""/></td><td rowspan=4></tr>
	<tr><th>签发机关</th><td><input type="text" id="idGrantDept" name="idGrantDept" value=""/></td></tr>
	<tr><th>有效期限</th><td><input type="text" id="idTime" name="idTime" value=""/></td></tr>
	<tr><th>照片base64编码</th><td><TEXTAREA  id="IDPictureBase64" name="IDPictureBase64" style="width:100%;height:120px"></TEXTAREA></td></tr>
</table>
</form>

<div id=about class=about></div>

</body>
</html>


<!-- ***********************************************************
设计制作：王其泳
通讯地址：福建省沙县招生考试中心（365500）
邮件地址：phototake@qq.com
QQ　号码：251333006
*************************************************************-->
<script type="text/javascript">
var idcId, idc, idcData, idcmsg, idcstatus;
window.onload=function (){
	//- IDCardWeb多浏览器适配和对象变量设定。
	idcmsg = document.getElementById("idcMsg");
	idcstatus = document.getElementById("idcStatus");
	var ie = document.getElementById("ieIdc");
	var ff = document.getElementById("myIdc");
	if(typeof(ie.idcard)!='undefined') {
		idc = ie;
	}else if(typeof(ff.idcard)!='undefined') {
		idc = ff;
	}else{
		document.getElementById("about").innerHTML = "<div style='color:red;line-height:180%'>IDCardWeb控件装入失败！<br>如果你还没安装IDCardWeb控件，请下载最新的安装包安装后再访问此页面。<br>如果你使用IE或IE内核浏览器且已安装了IDCardWeb最新版本，请检查IE安全选项中有关ActiveX的设置是否被限制了。</div>";
		return;
	}
	idcData = idc.IDCard;

	//- 网站授权，此属性必须在属性Verify和RarelyWord设置之前设置。要在自己系统中测试，请在QQ群:103894891中申请免费限时授权License。
	idc.License = "j0DhkPYY1dmfgMAAlUq02bp2GIljSUSMjrpeesuMkmEB05e8yzoVjiANIFHgP21rMfP63xTi+s87p7CD9d3MXZd0T07pXC4BbvL1PvG/qvFUhpe7uZsMxk05M";

	//- 停止自动读卡间隔时间（秒），默认600秒
	idc.AutoStopTime = 300;

	//- 设置界面大小，0－无界面（0*0），1－图标界面（20*20）(默认)，2－基本信息界面（40*134，只显示姓名和身份证号），3－标准界面（220*450），4－照片界面（176*134）
	idc.Size = 2;

	//- 设置阅读按键类型，0－无按键，1－图标按键(默认)，2－文字按键
	idc.ReadButtonType = 0;

	//- 设置是否寻找串口设备，ture－启动时寻找一次串口设备，false－不寻找串口设备（默认）
	idc.COMEnabled = true;

	//- 设置相片图片格式，支持jpg、png、bmp格式输出，默认jpg
	idc.PicFormat = "png";

	//- 设置相片背景颜色，png为AARRGGBB格式的十六进制字符串(AA为0时透明)，jpg和bmp为RRGGBB格式的十六进制字符串，为空（默认）时不改变背景色
	idc.PicBgColor = "00ccddee";

	//- 显示关于信息
	document.getElementById("about").innerHTML += idc.about.About().replace(/\n/g, "<br>");
	try{
		document.getElementById("about").innerHTML += "<br><br>系统已装语音库：" + idc.GetVoices();
	}catch(e){;}

	//- 启动自动阅读
	idc.ReadStart();

	//- 语音向导1
	speak("1");
} 


//- 语音向导
function speak(flag) {
	var txt = "";
	switch (flag){
		case "1":
			txt = "您好，您已进入“用户自助阅读身份证语音向导”模块，系统已准备好读取您的身份证信息，您有280秒左右的时间，请把身份证放到阅读器的阅读区，谢谢！";
			break;
		case "2":
			txt = idcData.idName + "，您好。系统已读取您的身份证信息，请收好您的身份证，谢谢！";
			break;
		default:
			txt = flag + "，请重新把身份证正确放到阅读器的阅读区，谢谢！";
			break;
	}
	speakText(txt);
}

//- 语音朗读文本
function speakText(txt){
	//- TTS文本语音合成朗读，3.3.0.708或以上版本才支持
	try{
		//- 设置语音库名或序号，可以用,分隔多个语音库，系统使用第一个找到的语音库， 此项参数可以放在页面初始化时设置
		idc.SetVoice("VW Liang, Chinese, China, 0");

		//- 设置语速，取值范围：-10 到 10， 此项参数可以放在页面初始化时设置
		idc.Rate = 0;

		//- 语音合成txt内容并朗读
		idc.SpeakText(txt);
	}catch(e){;}
}

//- 正确读卡后产生的事件
function onRead() {
	//- 阅读数据写入input
		document.getElementById("IDName").value=idcData.IDname;
		document.getElementById("IDCardNo").value=idcData.IDCardNo;
		document.getElementById("IDPictureBase64").value=idcData.IDPictureBase64;
		document.getElementById("idSex").value=idcData.idSex;
		document.getElementById("idNation").value=idcData.idNation;
		document.getElementById("idBorn").value=idcData.idBorn;
		document.getElementById("idAddress").value=idcData.idAddress;
		document.getElementById("idGrantDept").value=idcData.idGrantDept;
		document.getElementById("idTime").value=idcData.idBeginTime + " - " + idcData.idEndTime;
		document.getElementById("pic").innerHTML = "<img src='data:image/" + idc.PicFormat + ";base64," + idcData.idpicturebase64 + "' />";

	idcmsg.innerHTML = "消息 >> 读卡成功。";

	//- 关闭自动阅读
	idc.ReadClose();

	//- 语音向导2
	speak("2");

}

//- 状态事件
function onStatus(state,msg) {
	/*****************************************************************************
	state	msg
	0		关闭
	1		启动
	2		找到阅读器：……
	3		未找到卡（证），已查找了n秒时间。
	4		选择卡（证）失败
	5		读取基本信息失败。……
	6		读取追加数据失败。……
	7		照片解码错误。……
	8		软件未授权。
	9		读卡成功。
	10		读卡时系统出现错误。……
	11		未找到USB读卡设备(连接USB端口失败)
	*****************************************************************************/
	idcstatus.innerHTML = "状态 >> " + msg;
	if (state==3) idcstatus.innerHTML += "。请放卡…";

	if (state==4 || state==5 || state==6 || state==7 || state==8 || state==10){
		//- 语音向导，出错
		speak(msg);
	}
	console.log("状态:", msg);
}

//- 消息事件，主要是读卡错误时引发
function onMessage(msg) {
	idcmsg.innerHTML = "消息 >> " + msg;
	console.log("消息:", msg);
}

</script>