demo.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614
  1. <html>
  2. <head>
  3. <!--<meta http-equiv="Content-Type" content="text/html; charset=gb2312">-->
  4. <meta http-equiv="X-UA-Compatible" content="IE=10"/>
  5. <title>SDK demo</title>
  6. <script language="javascript" type="text/javascript">
  7. var CamID = -1;
  8. var ResolutionStr;
  9. var pCamWidth;
  10. var pCamHeight;
  11. var DeviceCount;
  12. var DeviceStatus = false;
  13. var isOpenCamera = false;
  14. var isAllSelect = 0;
  15. var RotateAngle = 0;
  16. var isCaptureIdCard = false;
  17. var IdCardCount = 0;
  18. var IdCardPath1;
  19. var IdCardPath2;
  20. //var t2 = window.setTimeout("show()", 3000);
  21. function ShowInfo(op) {
  22. var obj = document.getElementById("TextArea1");
  23. obj.value = obj.value + " \n" + op;
  24. }
  25. //时间格式化显示
  26. function formatDate(time) {
  27. var date = new Date(time);
  28. var year = date.getFullYear(),
  29. month = date.getMonth() + 1,
  30. day = date.getDate(),
  31. hour = date.getHours(),
  32. min = date.getMinutes(),
  33. sec = date.getSeconds();
  34. var newTime = year +
  35. (month < 10 ? '0' + month : month) +
  36. (day < 10 ? '0' + day : day) +
  37. (hour < 10 ? '0' + hour : hour) +
  38. (min < 10 ? '0' + min : min) +
  39. (sec < 10 ? '0' + sec : sec) ;
  40. return newTime;
  41. }
  42. function InitLoad() {
  43. //axOcx.SetCutType(1); //默认自动寻边
  44. DeviceCount = axOcx.GetDeviceCount(); //获取设备数目
  45. if (DeviceCount == 0)
  46. alert("未发现相关设备");
  47. if (DeviceCount > 0) {
  48. //枚举相关设备
  49. for (var i = 0; i < DeviceCount; i++) {
  50. var nameStr = axOcx.GetDeviceName(i);
  51. var objOption = document.createElement("option");
  52. objOption.text = nameStr;
  53. objOption.value = i;
  54. document.getElementById("Device").options.add(objOption);
  55. }
  56. document.getElementById("Device").selectedIndex = 0;
  57. CamID = 0;
  58. var ResolutionCount = axOcx.GetResolutionCount(CamID); //获取分辨率数目
  59. if (ResolutionCount > 0) {
  60. var resObj = document.getElementById("Resolution");
  61. for (var i = 0; i < ResolutionCount; i++) {
  62. var resolutionStr = axOcx.GetResolution(i);
  63. var objOption = document.createElement("option");
  64. objOption.text = resolutionStr;
  65. objOption.value = i;
  66. resObj.options.add(objOption);
  67. }
  68. resObj.selectedIndex = 0;
  69. ResolutionStr = resObj.options[resObj.selectedIndex].text;
  70. var pos = ResolutionStr.lastIndexOf("*");
  71. pCamWidth = parseInt(ResolutionStr.substring(0, pos));
  72. pCamHeight = parseInt(ResolutionStr.substring(pos + 1, ResolutionStr.length));
  73. }
  74. }
  75. }
  76. //开启摄像头
  77. function OpenDevice() {
  78. if (DeviceCount > 0) {
  79. var iRect = axOcx.OpenDevice(CamID, pCamWidth, pCamHeight);
  80. if (iRect == 0) {
  81. isOpenCamera = true;
  82. }
  83. else {
  84. axOcx.CloseDevice();
  85. isOpenCamera = false;
  86. }
  87. }
  88. }
  89. //关闭摄像头
  90. function CloseDevice() {
  91. if (isOpenCamera)
  92. {
  93. axOcx.CloseDevice()
  94. isOpenCamera = false;
  95. }
  96. }
  97. //切换摄像头
  98. function SelectDevice() {
  99. CamID = document.getElementById("Device").selectedIndex;
  100. var ResolutionCount = axOcx.GetResolutionCount(CamID); //获取分辨率数目
  101. if (ResolutionCount > 0) {
  102. var resObj = document.getElementById("Resolution");
  103. resObj.length = 0;
  104. for (var i = 0; i < ResolutionCount; i++) {
  105. var resolutionStr = axOcx.GetResolution(i);
  106. var objOption = document.createElement("option");
  107. objOption.text = resolutionStr;
  108. objOption.value = i;
  109. resObj.options.add(objOption);
  110. }
  111. resObj.selectedIndex = 0;
  112. ResolutionStr = resObj.options[resObj.selectedIndex].text;
  113. var pos = ResolutionStr.lastIndexOf("*");
  114. pCamWidth = parseInt(ResolutionStr.substring(0, pos));
  115. pCamHeight = parseInt(ResolutionStr.substring(pos + 1, ResolutionStr.length));
  116. }
  117. CloseDevice();
  118. OpenDevice();
  119. }
  120. //切换分辨率
  121. function SelectResolution() {
  122. var resObj = document.getElementById("Resolution");
  123. ResolutionStr = resObj.options[resObj.selectedIndex].text;
  124. var pos = ResolutionStr.lastIndexOf("*");
  125. pCamWidth = parseInt(ResolutionStr.substring(0, pos));
  126. pCamHeight = parseInt(ResolutionStr.substring(pos + 1, ResolutionStr.length));
  127. CloseDevice();
  128. OpenDevice();
  129. }
  130. //抓图拍照
  131. var captureCount = 0;
  132. function Capture() {
  133. if (isOpenCamera == false)
  134. return;
  135. var formatIndex = document.getElementById("FileFormat").selectedIndex; //文件格式
  136. var formatTypeStr = ".jpg";
  137. if (formatIndex == 0) formatTypeStr = ".jpg";
  138. if (formatIndex == 1) formatTypeStr = ".bmp";
  139. if (formatIndex == 2) formatTypeStr = ".png";
  140. if (formatIndex == 3) formatTypeStr = ".tif";
  141. if (formatIndex == 4) formatTypeStr = ".gif";
  142. if (formatIndex == 5) formatTypeStr = ".pdf";
  143. var name = formatDate(new Date().getTime());
  144. var path = "D:\\" + name + formatTypeStr;
  145. var base64Str = axOcx.CaptureImage(path);
  146. //axOcx.GetQrBarCodeContent(1, path);
  147. if (base64Str != "fail") {
  148. var showImgCtl = document.getElementById("img1");
  149. showImgCtl.src = "data:;base64," + base64Str;
  150. ShowInfo("拍照完成,图片位置:" + path);
  151. }
  152. else
  153. ShowInfo("拍照失败!");
  154. }
  155. function GetQrBarCodeContent() {
  156. if (isOpenCamera == false)
  157. return;
  158. var iRest = axOcx.GetQrBarCodeContent(1, "");
  159. ShowInfo("二维码识别结果:" + iRest);
  160. }
  161. //添加图片到PDF
  162. function AddImageToPDF() {
  163. if (isOpenCamera == false)
  164. return;
  165. axOcx.SetImageFormat(0); //默认添加JPG格式图片
  166. var name = formatDate(new Date().getTime());
  167. var path = "D:\\" + name + ".jpg";
  168. var base64Str = axOcx.CaptureImage(path);
  169. axOcx.AddImageFileToPDF(path);
  170. var showImgCtl = document.getElementById("img1");
  171. showImgCtl.src = "data:;base64," + base64Str;
  172. ShowInfo("已添加要合并到PDF的图片,图片位置:" + path);
  173. var formatIndex = document.getElementById("FileFormat").selectedIndex;
  174. axOcx.SetImageFormat(formatIndex);
  175. }
  176. //合并PDF
  177. function CombineToPDF() {
  178. var name = formatDate(new Date().getTime());
  179. var path = "D:\\" + name + ".pdf";
  180. var iRest = axOcx.CombineToPDF(path, false);
  181. if (iRest == 0) {
  182. ShowInfo("PDF合并成功,文件位置:" + path);
  183. }
  184. else {
  185. ShowInfo("PDF合并失败!");
  186. }
  187. }
  188. //旋转
  189. function SetRoate(ag) {
  190. if (isOpenCamera == false)
  191. return;
  192. if (ag == 0) {
  193. RotateAngle -= 90;
  194. if (RotateAngle < 0)
  195. RotateAngle = 270;
  196. }
  197. else {
  198. RotateAngle += 90;
  199. if (RotateAngle > 270)
  200. RotateAngle = 0;
  201. }
  202. axOcx.SetRotate(RotateAngle);
  203. }
  204. //缩放
  205. function Zoom(val) {
  206. if (isOpenCamera == false)
  207. return;
  208. if (val == 0) {
  209. axOcx.ZoomIn();
  210. }
  211. else {
  212. axOcx.ZoomOut();
  213. }
  214. }
  215. //1:1
  216. function TrueSize() {
  217. if (isOpenCamera == false)
  218. return;
  219. axOcx.TrueSize();
  220. }
  221. //适合屏幕
  222. function BestSize() {
  223. if (isOpenCamera == false)
  224. return;
  225. axOcx.BestSize();
  226. }
  227. //对焦
  228. function ManualToFocus() {
  229. if (isOpenCamera == false) return;
  230. axOcx.ManualToFocus();
  231. }
  232. //设备属性
  233. function SetParams() {
  234. if (isOpenCamera == false) return;
  235. axOcx.ShowImageSettingWindow();
  236. }
  237. //设置拍摄模式
  238. function SetCaptrueMode() {
  239. if (document.getElementById("Radio1").checked) {
  240. axOcx.SetCutType(0);
  241. }
  242. if (document.getElementById("Radio2").checked) {
  243. axOcx.SetCutType(1);
  244. }
  245. if (document.getElementById("Radio3").checked) {
  246. axOcx.SetCutType(2);
  247. }
  248. }
  249. //设置文件格式
  250. function SetFileFormat() {
  251. var obj = document.getElementById("FileFormat");
  252. axOcx.SetImageFormat(obj.selectedIndex);
  253. }
  254. //去底色
  255. function SetDeleteBgColor() {
  256. var obj = document.getElementById("Checkbox1");
  257. if (obj.checked) {
  258. axOcx.SetDeleteBgColor(1);
  259. }
  260. else {
  261. axOcx.SetDeleteBgColor(0);
  262. }
  263. }
  264. //上传
  265. function HttpUploadFile() {
  266. var filePath = "C:\\test.jpg";
  267. //var url = "http://192.168.1.80/MyServletTest/upload";
  268. var url = "http://localhost:4523/UploadFile.ashx";
  269. var iRest = axOcx.UploadFile(url, filePath);
  270. if(iRest=="fail")
  271. ShowInfo("上传失败!");
  272. else
  273. ShowInfo("上传成功. 后台返回内容:" + iRest);
  274. }
  275. //*************读取身份证**************************
  276. function ReadIdCard() {
  277. var iRest = axOcx.readCard();
  278. if (iRest == 0) {
  279. document.getElementById("CardName").value = axOcx.GetCardInfo(0);
  280. document.getElementById("CardSex").value = axOcx.GetCardInfo(1);
  281. document.getElementById("CardNation").value = axOcx.GetCardInfo(2);
  282. document.getElementById("CardBorn").value = axOcx.GetCardInfo(3);
  283. document.getElementById("CardAddress").value = axOcx.GetCardInfo(4);
  284. document.getElementById("CardNum").value = axOcx.GetCardInfo(5);
  285. document.getElementById("CardIssuedAt").value = axOcx.GetCardInfo(6);
  286. document.getElementById("CardEffectDate").value = axOcx.GetCardInfo(7) + "-" + axOcx.GetCardInfo(8);
  287. var obj = document.getElementById("IdCardPhoto");
  288. obj.src = "data:;base64," + axOcx.GetCardInfo(10);
  289. ShowInfo("读卡成功");
  290. }
  291. else
  292. ShowInfo("读卡失败!");
  293. }
  294. //*************人脸识别部分**************************
  295. //打开单目摄像头
  296. function OpenSingleFaceDevice() {
  297. var iRest = axOcx.OpenSingleFaceDevice();
  298. if(iRest!=0)
  299. ShowInfo("开启单目人脸摄像头失败!");
  300. else
  301. ShowInfo("开启单目人脸摄像头成功");
  302. }
  303. //关闭单目摄像头
  304. function CloseSingleFaceDevice() {
  305. axOcx.CloseSingleFaceDevice();
  306. ShowInfo("关闭单目人脸摄像头");
  307. }
  308. //打开双目摄像头
  309. function OpenDualFaceDevice() {
  310. var iRest = axOcx.OpenDualFaceDevice();
  311. if (iRest != 0)
  312. ShowInfo("开启双目人脸摄像头失败!");
  313. else
  314. ShowInfo("开启双目人脸摄像头成功");
  315. }
  316. //关闭双目摄像头
  317. function CloseDualFaceDevice() {
  318. axOcx.CloseDualFaceDevice();
  319. ShowInfo("关闭双目人脸摄像头");
  320. }
  321. //两张图片比对
  322. function FaceImageCompare() {
  323. var imgpath1 = "D:\\face1.jpg";
  324. var imgpath2 = "D:\\face2.jpg";
  325. var iRest = axOcx.FaceImageCompare(imgpath1, imgpath2);
  326. if(iRest==0)
  327. ShowInfo("比对通过,验证为同一个人");
  328. else
  329. ShowInfo("比对失败! 验证不通过!");
  330. }
  331. //图片与人脸摄像头检测到的人脸图像比对
  332. function FaceFromCameraCompare() {
  333. var imgpath1 = "D:\\face1.jpg";
  334. var iRest = axOcx.FaceFromCameraCompare(imgpath1);
  335. if (iRest == 0)
  336. ShowInfo("比对通过,验证为同一个人");
  337. else
  338. ShowInfo("比对失败! 验证不通过!");
  339. }
  340. //获取检测到的人脸图像
  341. function GetFaceImageFromCam() {
  342. var path = "D:\\face1.jpg";
  343. var iRestStr = axOcx.GetFaceImageFromCam(path);
  344. if (iRestStr == "fail") {
  345. ShowInfo("获取检测到的人脸图像失败!");
  346. }
  347. else {
  348. var showImgCtl = document.getElementById("img1");
  349. showImgCtl.src = "data:;base64," + iRestStr;
  350. ShowInfo("获取检测到的人脸图像,图片位置:" + path);
  351. }
  352. }
  353. //人脸摄像头拍照
  354. function FaceCameraCapture() {
  355. var path = "D:\\face2.jpg";
  356. var iRestStr = axOcx.FaceCameraCapture(path);
  357. if (iRestStr == "fail") {
  358. ShowInfo("人脸摄像头拍照失败!");
  359. }
  360. else {
  361. var showImgCtl = document.getElementById("img1");
  362. showImgCtl.src = "data:;base64," + iRestStr;
  363. ShowInfo("人脸摄像头拍照完成,图片位置:" + path);
  364. }
  365. }
  366. //////////////////////////////////////////
  367. function StartRec() {
  368. var videoPath = "D:\\videotest.avi";
  369. var iRest = axOcx.Start_REC(videoPath, 8);
  370. if (iRest == 0)
  371. ShowInfo("开始录像");
  372. else
  373. ShowInfo("开始录像失败!");
  374. }
  375. function StopRec() {
  376. var iRest = axOcx.Stop_REC();
  377. ShowInfo("停止录像");
  378. }
  379. </script>
  380. <script language="javascript" for="axOcx" event="CheckLivingBody(flag)" type="text/javascript">
  381. alert("事件触发");
  382. </script>
  383. </head>
  384. <body onload="InitLoad();OpenDevice()" onunload="CloseDevice()">
  385. <div style="width:600px; height: 700px; border: 1px solid white; background:#C7EDCC; float:left">
  386. <!--[if IE]>
  387. <object classid="clsid:42BEFDDA-49E3-4851-9031-DC56ADA62756" id="axOcx" style=" width:100%; height:400px" ></object>
  388. <![endif]-->
  389. <!--[if !IE]> -->
  390. <object type="application/x-camera" clsid="{42BEFDDA-49E3-4851-9031-DC56ADA62756}" id="axOcx" style=" width:100%; height:400px" >
  391. </object>
  392. <!-- <![endif]-->
  393. <div align="left" style=" width:100%; height:32px">
  394. <input type = "button" value = "放大" onclick = "Zoom(0);" style="height: 30px" />
  395. <input type = "button" value = "缩小" onclick = "Zoom(1);" style="height: 30px" />
  396. <input type = "button" value = "左旋" onclick = "SetRoate(0);" style="height: 30px" />
  397. <input type = "button" value = "右旋" onclick = "SetRoate(1);" style="height: 30px" />
  398. <input type = "button" value = "1:1" onclick = "TrueSize();" style="height: 30px" />
  399. <input type = "button" value = "适屏" onclick = "BestSize();" style="height: 30px" />
  400. <input type = "button" value = "对焦" onclick = "ManualToFocus();" style="height: 30px" />
  401. <input type = "button" id="CaptureBt" value = " 拍照 " onclick = "Capture();" style="height: 30px" />
  402. <input type = "button" value = "读身份证" onclick = "ReadIdCard();" style="height: 30px" />
  403. </div>
  404. <div align="left" style=" width:100%; height:32px">
  405. <input type = "button" value = " 设置 " onclick = "SetParams();" style="height: 30px" />
  406. <input type = "button" value = " 上传 " onclick = "HttpUploadFile();" style="height: 30px" />
  407. <input type = "button" value = "二维码识别" onclick = "GetQrBarCodeContent();" style="height: 30px" />
  408. <input type = "button" value = "添加图片到PDF" onclick = "AddImageToPDF()" style="height: 30px"/>
  409. <input type = "button" value = "合并PDF" onclick = "CombineToPDF()" style="height: 30px"/>
  410. <input type = "button" value = "开始录像" onclick = "StartRec()" style="height: 30px"/>
  411. <input type = "button" value = "停止录像" onclick = "StopRec()" style="height: 30px"/>
  412. <input id="Checkbox1" type="checkbox" onclick = "SetDeleteBgColor()"/>去底色
  413. </div>
  414. <br />
  415. <div align="left" style=" width:100%; height:32px">
  416. <input type = "button" value = "开启单目人脸摄像头" onclick = "OpenSingleFaceDevice()" style="height: 30px"/>
  417. <input type = "button" value = "关闭单目人脸摄像头" onclick = "CloseSingleFaceDevice()" style="height: 30px"/>
  418. <input type = "button" value = "开启双目人脸摄像头" onclick = "OpenDualFaceDevice()" style="height: 30px"/>
  419. <input type = "button" value = "关闭双目人脸摄像头" onclick = "CloseDualFaceDevice()" style="height: 30px"/>
  420. </div>
  421. <div align="left" style=" width:100%; height:32px">
  422. <input type = "button" value = "获取检测的人脸图片" onclick = "GetFaceImageFromCam()" style="height: 30px"/>
  423. <input type = "button" value = "人脸摄像头拍照" onclick = "FaceCameraCapture()" style="height: 30px"/>
  424. <input type = "button" value = "人脸图片比对" onclick = "FaceImageCompare()" style="height: 30px"/>
  425. <input type = "button" value = "人脸图片与摄像头人脸比对" onclick = "FaceFromCameraCompare()" style="height: 30px"/>
  426. </div>
  427. <div style="width:100%; height: 120px" align="left" >
  428. <textarea id="TextArea1" style=" width:596px; height:120px" cols="20" rows="5"></textarea>
  429. </div>
  430. </div>
  431. <div style="width:210px; height: 700px; border: 1px solid white; background:#C7EDCC; float:left">
  432. <div style="width:100%; height: 32px" align="left" >
  433. <img id="img1" src="" style="width: 160px;height: 160px" /> <br /> <br />
  434. 设 备:
  435. <select id="Device" name="D1" onchange = "SelectDevice()" style="width:145px"> </select> <br />
  436. 分辨率:
  437. <select id="Resolution" name="D2" onchange = "SelectResolution()" style="width:138px" > </select> <br />
  438. 文件格式:
  439. <select id="FileFormat" onchange = "SetFileFormat()">
  440. <option value="0">jpg</option>
  441. <option value="1">bmp</option>
  442. <option value="2">png</option>
  443. <option value="3">tif</option>
  444. <option value="4">gif</option>
  445. <option value="5">pdf</option>
  446. </select>
  447. <br />
  448. <br /> 拍摄模式: <br />
  449. <input id="Radio1" name="R1" type="radio" value="V1" onclick="SetCaptrueMode()" checked="checked"/>不裁切
  450. <input id="Radio2" name="R1" type="radio" value="V2" onclick="SetCaptrueMode()"/>自动裁切<br />
  451. <input id="Radio3" name="R1" type="radio" value="V3" onclick="SetCaptrueMode()"/>手动裁切<br />
  452. <br />身份证信息 <br />
  453. <img id="IdCardPhoto" src="" style="width: 80px;height: 100px;" />
  454. <br />
  455. 姓名
  456. <input id="CardName" type="text" style="width: 100px"/> <br />
  457. 性别
  458. <input id="CardSex" type="text" style="width: 50px"/>
  459. 民族
  460. <input id="CardNation" type="text" style="width: 55px"/> <br />
  461. 出生
  462. <input id="CardBorn" type="text" style="width: 100px"/> <br />
  463. 住址
  464. <br />
  465. <textarea id="CardAddress" cols="20" rows="3" style="width:200px"></textarea>
  466. 身份证号码
  467. <br />
  468. <input id="CardNum" type="text" style="width: 200px"/> <br />
  469. 签发机关
  470. <input id="CardIssuedAt" type="text" style="width: 128px"/> <br />
  471. 有效期限
  472. <input id="CardEffectDate" type="text" style="width: 128px"/> <br />
  473. </div>
  474. </div>
  475. </body>
  476. </html>