Web应用中同时只能有一个应用使用扫描仪或摄像头,直接使用TScan调用扫描仪或摄像头。
扫描图像预览:
示例代码
<div class="layui-row layui-col-space5 layui-border"> <div class="layui-col-md4"> <div class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">选择扫描仪</label> <div class="layui-input-block"> <select id="scanerlist" lay-verify="required"> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">扫描方式</label> <div class="layui-input-block"> <input type="radio" name="cbo_scantype" value="1" title="单张扫描" checked> <input type="radio" name="cbo_scantype" value="2" title="连续扫描" > <input type="radio" name="cbo_scantype" value="3" title="摄像头抓拍" > </div> </div> <div class="layui-form-item"> <label class="layui-form-label">二维码识别</label> <div class="layui-input-block"> <input type="checkbox" id="cbo_ewm" lay-skin="switch" lay-text="识别|不识别"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">显示设置</label> <div class="layui-input-block"> <input type="checkbox" id="cbo_ss" lay-skin="switch" lay-text="显示|隐藏" checked> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">连续抓拍</label> <div class="layui-input-block"> <input type="checkbox" id="cbo_multi" lay-skin="switch" lay-text="连续|单次"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" id="btnScan">扫描</button> </div> </div> </div> </div> <div class="layui-col-md8"> <blockquote class="layui-elem-quote layui-quote-nm"> 扫描图像预览: </blockquote> <div class="layui-upload-list layui-border" style="padding:5px 0 5px 0;min-height:200px;" id="scanFileList"> </div> <div class="layui-form layui-form-pane"> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">二维码识别结果</label> <div class="layui-input-block"> <textarea id="qrResult" placeholder="二维码识别结果" class="layui-textarea"></textarea> </div> </div></div> </div> </div> <script src="/templates/js/TCTRL.min.js"></script> <script> var $ = layui.jquery; //注册控件 TScan.Register("bffb93e0e3b268b7a37f8122f05f16d11695f302317dd5b7ed2c4ff3a73a709b24f40c2c1592dac9d11418f9d22515d5"); //获取扫描仪列表 TScan.getSourceList(function (dat) { console.log(JSON.stringify(dat)); if (dat.SLIST) { $(dat.SLIST).each(function (i) { $("#scanerlist").append($("<option value='" + i + "'>" + dat.SLIST[i] + "</option>")); }) layui.form.render('select'); } }); var scanidx = 0; TScan.OnDataIn = function (dat) { if (dat.STAT == 2) { //扫描成功 if (dat.QRCODE != "") $("#qrResult").val($("#qrResult").val() + JSON.stringify(dat.QRCODE) + "\r\n");//alert("二维码识别结果:" + JSON.stringify(dat.QRCODE)); //上传图像 if (dat.CIMG != "") { //添加到列表 dat.GI_IDX 当前图像编号,每次扫描从0开始 0,1,2,3,可以根据编号防止重复保存 $("#scanFileList").append("<img src=\"data:image/jpeg;base64," + dat.CIMG + "\" style=\"width: 90px; height: 90px;\" /> "); //上传图像 //$.post("/demos/FileScan.html", { img: dat.CIMG, id: scanidx }, function (dat2) { // $("#f_" + dat2.id + " img").attr("src", dat2.src); // $("#f_" + dat2.id + " a").attr("href", dat2.src); //}, "json"); } scanidx++; } else if (dat.STAT == 3) { console.log('用户取消操作'); } else if (dat.STAT == -1) { console.log('扫描仪扫描失败'); } } $("#btnScan").click(function () { TScan.Scan({ MODE: $("input:checked[name='cbo_scantype']").val(), //1单张扫描 2连续扫描 3摄像头抓拍 QRCODE: $("#cbo_ewm").is(":checked"), //是否识别图片中的条码或二维码 摄像头抓拍时不返回图像 SSET: $("#cbo_ss").is(":checked"), RESOLUTION: 200, SSI: $("#scanerlist").val(), IsMulti: $("#cbo_multi").is(":checked"), //是否连续从摄像头获取图像 picType:"jpg" //缓存图像格式 }, function (dat) { if (dat.STAT == 11) { } if (dat.STAT == -99) { if (confirm("您还没有安装扫描插件\n\n现在下载安装吗?")) { location = "/files/TCtrls.exe"; } } if (dat.STAT == 12) { alert("注册失败!"); } }); }); </script>