网页中 BarcodeReader.js 识别商品条形码

最新推荐文章于 2024-08-10 07:57:44 发布

罗汉松驻扎的工作基地

最新推荐文章于 2024-08-10 07:57:44 发布

阅读量1.4k

点赞数

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

版权

最近要做一个商品挑选码的扫码程序，我这里做了一个简单的 asp.net mvc 网站例子，有兴趣的可以看看。本人菜鸟，写错请见谅。

//参考文档
https://blog.csdn.net/qq_37164847/article/details/103731764


//平时自己常用来生成条形码的工具网站
http://www.t-x-m.com


//别人做的条形码和二维码解析网站（可以用来对比自己做的程序）
https://www.moyublog.com/demo/93_2536.html

我做的例子界面如下，很简单

首先在 visual studio中建立一个简单的 asp.net mvc 项目， homeController里面加入一个 actionResult ，如 Tiaoxm ：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace tiaoxmTest1.Controllers
{
    public class HomeController : Controller
    {
       
        public ActionResult Index()
        {
            return View();
        }

        //条形码
        public ActionResult Tiaoxm()
        {
            return View();
        }


    }






}

然后是前端代码


@{
    Layout = null;
}

<!DOCTYPE html>

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

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40076/DecoderWorker.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40076/exif.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40076/BarcodeReader.js"></script>

</head>
<body>
    <div> 
        <p>自己模仿做条形码</p>
        <input type="file" name="barCode" id="barCode" value="select img" />

        <div style="border-color:aquamarine;">
            <img id="img" style="width:350px;height:150px;display:block;" />
        
            <p class="codeInfo mt-12" style="color: red;font-size: 16px;text-align: center;"></p>
        </div>

    </div>

    <script type="text/javascript">

        $(function () {

            BarcodeReader.Init();

            BarcodeReader.SetImageCallback(function (result) {
                console.dir("1.===" + JSON.stringify(result));
                if (!result.length) {
                    $(".codeInfo").html('条形码读取失败');
                    return
                }
                var barcode = result[0];
                if (barcode.Value) {
                    $(".codeInfo").html('条形码信息是：' + barcode.Value);
                }
            });


            $('#barCode').change(function (evt) {
                //图片选择按钮
                var file = evt.target.files[0];
                var reader = new FileReader();
  
                reader.onloadend = function () {
                    var img = new Image();
                    img.src = reader.result;
              
                    BarcodeReader.DecodeImage(img);
                }
                 
                reader.readAsDataURL(file);
                img.src = URL.createObjectURL(file)
            });  //end btn change 

        }); //end page ready

    </script>


</body>
</html>

写到这里就可以运行条形码识别了，其中head 里面的