前端学习--实现二维码识别功能

最新推荐文章于 2024-08-10 10:10:58 发布

No_red

最新推荐文章于 2024-08-10 10:10:58 发布

阅读量1.1w

点赞数 9

分类专栏：前端文章标签：二维码 js canvas video

本文链接：https://blog.csdn.net/No_red/article/details/80093421

版权

本文介绍了一种使用jsqrcode库在前端实现二维码识别的方法，通过JavaScript和Canvas结合，实现在本地网页上捕获并解析摄像头中的二维码，详细介绍了功能演示和程序流程。

摘要由CSDN通过智能技术生成

概述：

最近所做的毕设项目正好与之前很火的共享单车相关，共享单车应用中很关键的一个部分就是扫码用车，但我之前没有做过相关的模块，在参考网上相关实现的教程时发现，基本上所有的二维码识别模块都是通过客户端来完成的很少有通过前端技术实现。令我很苦恼。

但是功夫不负有心人，查阅过大量资料后我在github上找到了一个用js实现二维码扫描的库（https://github.com/LazarSoft/jsqrcode），而且顺藤摸瓜的找到了采用这个库实现的真实例子(https://webqr.com/)。

功能演示

这里我们的网页只是文件只是放在本地，并使用ubuntu自带的firefox打开，如果使用其他浏览器比如谷歌可能无法弹出请求摄像头的模态框（谷歌的安全策略不允许调用本地媒体）

这里写图片描述

允许摄像头后就会开始捕捉摄像头中的二维码

这里写图片描述

查看扫码结果，我们使用草料二维码(https://cli.im/)生成了里面包含一个“1”字符的二维码，经过我们的二维码识别程序成功识别了出来，并在下面显示出来。

这里写图片描述

程序流程图

这里写图片描述

代码

index.htm（其中引用的js除了webcam.js为自己编写的其他均为githubjsqrcode上下载的js库）

<html>
<head>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <meta content="email=no" name="format-detection">
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.0.0/jquery.js"></script>

  <title>scan-code</title>
  <style type="text/css">
    *{
        padding:0;
        margin:0;
    }
    a{
        text-decoration:none;
        color:#fff;
    }
    html{
        width:100%;
        height:100%;
        font-size:16px;
    }
    body{
        width:100%;
        height:100%;

    }
    .total{
        width:100%;
        height:100%;
        /*background:url(/static/img/bg2.jpeg) no-repeat;*/