js识别二维码

最新推荐文章于 2024-04-15 20:32:32 发布

罗汉松驻扎的工作基地

最新推荐文章于 2024-04-15 20:32:32 发布

阅读量1.7k

点赞数

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

版权

最近做一个手机端识别二维码的功能，百度了一下，看到很多文章说 js qrcode 等等的工具可以帮忙解析二维码图片，我这里用到的js 库有：

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cozmo.github.io/jsQR/jsQR.js"></script>

你可以先把js下载到自己本地磁盘，也可以通过cdn网络提供脚本文件。

本人菜鸟，写的不对，请见谅。

首先我们可以到 https://cozmo.github.io/jsQR 这个网站里面看看一个带有摄像头扫码二维码的网页例子，这个也是我项目中需要做的的样子。我用的浏览器是谷歌或者最新的edge浏览器。

打开visual studio 建立一个普通的asp.net mvc网站，在HomeController 里面改造一下 Index 视图。

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

namespace SaoMaTest1.Controllers
{
    public class HomeController : Controller
    {
        //识别二维码例子
        public ActionResult Index()
        {
            return View();
        }

        
        

    }








}

前端html页面代码如下


@{
    Layout = null;
}

<!DOCTYPE html>

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

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cozmo.github.io/jsQR/jsQR.js"></script>

</head>
<body>
    <!--牛逼真的真的可用-->
    <span lan_id="bc">选择图片</span> 
    <input type="file" id="pictureChange" />

    <div>
        <h2>识别结果：</h2>
        <ul id="result"></ul>
    </div>

    <script type="text/javascript">
        $("body").append('<canvas id="qrcanvas" style="display:none;"></canvas>');

        $("#pictureChange").change(function (e) {
            var file = e.target.files[0];
            if (window.FileReader) {
                var fr = new FileReader();
                fr.readAsDataURL(file);
                fr.onloadend = function (e) {
                    var base64Data = e.target.result;
                    base64ToqR(base64Data)
                }
            }
        });

        function base64ToqR(data) {
            var c = document.getElementById("qrcanvas");
            var ctx = c.getContext("2d");

            var img = new Image();
            img.src = data;
            img.onload = function () {
                $("#qrcanvas").attr("width", img.width)
                $("#qrcanvas").attr("height", img.height)
                ctx.drawImage(img, 0, 0, img.width, img.height);

                var imageData = ctx.getImageData(0, 0, img.width, img.height);
                const code = jsQR(imageData.data, imageData.width, imageData.height, {
                    inversionAttempts: "dontInvert",
                });
                if (code) {
                    showCode(code.data)
                } else {
                    alert("识别错误")
                }
            };
        }

        function showCode(code) {
            $("#result").append("<li>" + code + "</li>")
        }
    </script>

</body>
</html>

代码写到这里就可以运行来看看了。

代码思路：

首先html里面需要有一个画布标签 <canvas> 和上传按钮 <input type=file>

上传按钮选择好了二维码的图片只好，画布获取图片 drawImage(img, 0, 0, width, height) ；

<canvas> 得到图片之后，使用 script/jsQR.js 库提供的 function jsQR(）来解析二维码图片，从而得到解析字符串。

罗汉松驻扎的工作基地

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js识别二维码

最近做一个手机端识别二维码的功能，百度了一下，看到很多文章说 js qrcode 等等的工具可以帮忙解析二维码图片，我这里用到的js 库有： <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script src="https://cozmo.github.io/jsQR/jsQR.js"></script>你可以先把js下载到自己本地磁盘
复制链接

扫一扫