ScanPlus.cshtml 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. @{
  2. Layout = null;
  3. }
  4. <!doctype html>
  5. <html>
  6. <head>
  7. <meta charset="UTF-8">
  8. <title></title>
  9. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  10. <link href="~/Content/Scripts/plugins/mui/css/mui.css" rel="stylesheet" />
  11. <script src="~/Content/Scripts/plugins/mui/js/mui.js"></script>
  12. <style type="text/css">
  13. #bcid {
  14. width: 100%;
  15. height: 100%;
  16. position: absolute;
  17. background: #000000;
  18. }
  19. .fbt {
  20. color: #0E76E1;
  21. width: 50%;
  22. background-color: #ffffff;
  23. float: left;
  24. line-height: 44px;
  25. text-align: center;
  26. }
  27. .mui-bar {
  28. background-color: transparent;
  29. -webkit-box-shadow: none;
  30. box-shadow: none;
  31. }
  32. </style>
  33. </head>
  34. <body id="bcid" >
  35. <header class="mui-bar">
  36. <a class="mui-icon mui-icon-left-nav mui-pull-left mui-action-back" style="color:white"></a>
  37. <h1 class="mui-title" style="color:white;">扫码注册</h1>
  38. @*<span class="mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right" style="color:white" id="turnTheLight"></span>*@
  39. <button class="mui-btn mui-btn-link mui-pull-right" style="color:white" onclick="scanPicture();">相册</button>
  40. </header>
  41. <div >
  42. <!--盛放扫描控件的div-->
  43. </div>
  44. @*<input type="file" capture="camera" accept="image/*" />*@
  45. @*<input type="file" accept="image/*" capture="camera">*@
  46. <script type="text/javascript">
  47. var scan = null;//扫描对象
  48. mui.plusReady(function () {
  49. mui.init({
  50. beforeback: function () {
  51. if (scan) {
  52. scan.close();
  53. }
  54. return true;
  55. }
  56. });
  57. startRecognize();
  58. });
  59. function startRecognize() {
  60. try {
  61. var filter;
  62. //自定义的扫描控件样式
  63. var styles = { frameColor: "#29E52C", scanbarColor: "#29E52C", background: "" }
  64. //扫描控件构造
  65. scan = new plus.barcode.Barcode('bcid', filter, styles);
  66. scan.onmarked = onmarked;
  67. scan.onerror = onerror;
  68. scan.start();
  69. ////打开关闭闪光灯处理
  70. //var flag = false;
  71. //document.getElementById("turnTheLight").addEventListener('tap', function () {
  72. // if (flag == false) {
  73. // scan.setFlash(true);
  74. // flag = true;
  75. // } else {
  76. // scan.setFlash(false);
  77. // flag = false;
  78. // }
  79. //});
  80. } catch (e) {
  81. mui.alert('扫描错误,请重新扫描:\n' + e, '提示');
  82. }
  83. };
  84. function onerror(e) {
  85. plus.nativeUI.alert(e);
  86. };
  87. function onmarked(type, result) {
  88. var text = '';
  89. switch (type) {
  90. case plus.barcode.QR:
  91. text = 'QR: ';
  92. break;
  93. case plus.barcode.EAN13:
  94. text = 'EAN13: ';
  95. break;
  96. case plus.barcode.EAN8:
  97. text = 'EAN8: ';
  98. break;
  99. }
  100. result = result.replace(new RegExp('"', 'g'), '');
  101. mui.openWindow({
  102. url: result,
  103. id: 'regist',
  104. preload: true,
  105. show: {
  106. aniShow: 'pop-in'
  107. },
  108. styles: {
  109. popGesture: 'hide'
  110. },
  111. waiting: {
  112. autoShow: false
  113. }
  114. });
  115. };
  116. // 从相册中选择二维码图片
  117. function scanPicture() {
  118. plus.gallery.pick(function (path) {
  119. plus.barcode.scan(path, onmarked, function (error) {
  120. plus.nativeUI.alert("无法识别此图片");
  121. });
  122. }, function (err) {
  123. plus.nativeUI.alert("无法识别此图片");
  124. });
  125. }
  126. </script>
  127. </body>
  128. </html>