Asp.net MVC 使用quaggaJS扫描条形码

最新推荐文章于 2024-04-24 16:59:09 发布

罗汉松驻扎的工作基地

最新推荐文章于 2024-04-24 16:59:09 发布

阅读量1.3k

点赞数

文章标签： c# 开发语言 mvc

本文链接：https://blog.csdn.net/MFCdestoryer/article/details/121575175

版权

近来做了一个手机摄像头扫描条形码的项目，具体用了quaggaJS 。

网上有很多例子，我这里按照官网的做了一个Asp.net mvc 4的例子，本人菜鸟，写的有误的话，请见谅。

首先到官网git里面下载作者写好的js代码（我是把整个example 下载下来，然后改造的，谢谢老哥提供的js 代码）

官网
https://serratus.github.io/quaggaJS/
官网例子
https://serratus.github.io/quaggaJS/examples/
这些例子有上传图片的，也有手机摄像头扫描的。很棒

然后自己新建一个visual studio 的web工程项目：

然后再HomeControl里面加入一个 ScanTXM 页面

    public class HomeController : Controller
    {
        //home
        public ActionResult Index()
        {
            return View();
        }

        //Q scan page
        public ActionResult ScanTXM()
        {
            return View();
        }

    }

然后就是包含作者的js 到项目里面，其中平时常用的 jquery也有引入。

然后就是编辑 ScanTXM.cshtml 视图里面的html ，如下（都是抄作者的例子代码）

@*ScanTXM html*@
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ScanTXM</title>

    <script src="~/Scripts/jquery-1.7.1.js"></script>
    <script src="~/Scripts/Q/quagga.js"></script>
    <script src="~/Scripts/Q/live_w_locator.js"></script>
</head>

<body>
    <header style="display:none;">
        <div class="headline">
            <h1>QuaggaJS</h1>
            <h2>An advanced barcode-scanner written in JavaScript</h2>
        </div>
    </header>

    <section id="container" class="container">
        <div style="" class="controls">
            <fieldset class="input-group">
                <button class="stop">Stop</button>
            </fieldset>

            <fieldset class="reader-config-group">
                <label>
                    <span>Barcode-Type</span>
                    <select name="decoder_readers">
                        <option value="code_39" selected="selected">Code 39</option>
                        <option value="code_128">Code 128</option>
                        <option value="code_39_vin">Code 39 VIN</option>
                        <option value="ean">EAN</option>
                        <option value="ean_extended">EAN-extended</option>
                        <option value="ean_8">EAN-8</option>
                        <option value="upc">UPC</option>
                        <option value="upc_e">UPC-E</option>
                        <option value="codabar">Codabar</option>
                        <option value="i2of5">Interleaved 2 of 5</option>
                        <option value="2of5">Standard 2 of 5</option>
                        <option value="code_93">Code 93</option>
                    </select>
                </label>
                <label>
                    <span>Resolution (width)</span>
                    <select name="input-stream_constraints">
                        <option value="320x240">320px</option>
                        <option selected="selected" value="640x480">640px</option>
                        <option value="800x600">800px</option>
                        <option value="1280x720">1280px</option>
                        <option value="1600x960">1600px</option>
                        <option value="1920x1080">1920px</option>
                    </select>
                </label>
                <label>
                    <span>Patch-Size</span>
                    <select name="locator_patch-size">
                        <option value="x-small">x-small</option>
                        <option value="small">small</option>
                        <option selected="selected" value="medium">medium</option>
                        <option value="large">large</option>
                        <option value="x-large">x-large</option>
                    </select>
                </label>
                <label>
                    <span>Half-Sample</span>
                    <input type="checkbox" checked="checked" name="locator_half-sample" />
                </label>
                <label>
                    <span>Workers</span>
                    <select name="numOfWorkers">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option selected="selected" value="4">4</option>
                        <option value="8">8</option>
                    </select>
                </label>
                <label>
                    <span>Camera</span>
                    <select name="input-stream_constraints" id="deviceSelection"></select>
                </label>
                <label style="display: none">
                    <span>Zoom</span>
                    <select name="settings_zoom"></select>
                </label>
                <label style="display: none">
                    <span>Torch</span>
                    <input type="checkbox" name="settings_torch" />
                </label>
            </fieldset>
        </div>

        <div id="result_strip">
            <ul class="thumbnails"></ul>
            <ul class="collector"></ul>
        </div>
        <div id="interactive" class="viewport"></div>
    </section>

    <footer style="display:none;">
        <p>copy right</p>
    </footer>

</body>

</html>

然后保存就可以运行代码了，运行的效果如下：

这里想补充说明一点：条形码的编码规则有好几种，比如code 39 ， code 128 等等，不是每一种类的编码都能解析，要选对了才能正常并且快速的识别。下面我截个图展示下条码格式

我经常用来生成测试条形码的网站是

免费在线条形码生成器免费在线条形码生成器,支持常用条形码和二维码,如UPC商品条码,Code128条码,Code39条码,EAN条码,ISBN条码,PDF417条码等34种主流常用条码格式 .http://www.t-x-m.com/

罗汉松驻扎的工作基地

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Asp.net MVC 使用quaggaJS扫描条形码

近来做了一个手机摄像头扫描条形码的项目，具体用了quaggaJS 。网上有很多例子，我这里按照官网的做了一个Asp.net mvc 4的例子，本人菜鸟，写的有误的话，请见谅。首先到官网git里面下载作者写好的js代码（我是把整个example 下载下来，然后改造的，谢谢老哥提供的js 代码）官网https://serratus.github.io/quaggaJS/官网例子https://serratus.github.io/quaggaJS/examples/这些例子有上传图
复制链接

扫一扫