扫描插件

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="/files/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>