llqrcode js识别二维码解析二维码信息实例

目录
  • 正文
  • 代码

正文

llqrcode.js具有扫描二维码功能，用来进行从图片中识别二维码，可解析二维码的信息。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>llqrcode识别二维码</title>
    <script src="llqrcode.js"></script>
    <script>
        function getUrl(e,param){
            analyticCode.getUrl(
                param,e,function(url,param){
                    document.querySelector("#uploadQrcode").style.display = "none";
                    document.querySelector("#uploadQrcode_preview").innerHTML ="<img src='"+param+"' />";
                    document.querySelector("#qrcodeUrl").innerHTML ="识别内容："+ url;
                    document.querySelector("#rescan").style.display = "block";
                }
            )
        }

        let getObjectURL = function(file){
            let url = null ;
            if (window.createObjectURL!=undefined) {
                url = window.createObjectURL(file) ;
            } else if (window.URL!=undefined) {
                url = window.URL.createObjectURL(file) ;
            } else if (window.webkitURL!=undefined) {
                url = window.webkitURL.createObjectURL(file) ;
            }
            return url ;
        }
        window.analyticCode = {
            getUrl : function(type,elem,fn){
                let url = null,src = null;

                if(type === 'img-url'){
                    url = elem.src;
                }else if(type === 'file-url' && elem.files.length > 0){
                    url = getObjectURL(elem.files[0]);
                }
                qrcode.decode(url);
                qrcode.callback = function(imgMsg){
                    fn(imgMsg,url);
                }
            }
        }
    </script>
    <style>
        h3{
            text-align: center;
            margin-top: 100px;
        }
        #uploadQrcode{
            width: 80px;
            height: 80px;
            margin:20px auto 0;
            border: 2px dashed #ccc;
            border-radius: 20px;
            font-size: 25px;
            line-height: 80px;
            text-align: center;
            color: #ccc;
            position: relative;
            cursor: pointer;
        }
        #selectQrcode{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }
        #qrcodeUrl{
            text-align: center;
            margin-top: 15px;
        }
        #uploadQrcode_preview{
            width: 80px;
            height: 80px;
            margin:20px auto 0;
        }
        #uploadQrcode_preview img{
            width: 80px;
            height: 80px;
        }
        #rescan{
            text-align: center;
            text-decoration: none;
            color: #666;
            font-size: 15px;
            margin-top: 15px;
            display: none;
        }
    </style>
</head>
<body>
    <h3>选择一张二维码图片</h3>
    <div id="uploadQrcode">
        <span>+</span>
        <input type="file" id="selectQrcode" onChange="getUrl(this,'file-url')" />
    </div>
    <!-- 图片预览 -->
    <div id="uploadQrcode_preview"></div>
    <!-- 识别结果 -->
    <p id="qrcodeUrl"></p>
    <a href="" id=" rel="external nofollow" rescan">重新识别</a>
</body>
</html>

llqrcode.js下载

以上就是llqrcode js识别二维码解析二维码信息实例的详细内容，更多关于llqrcode js识别解析二维码信息的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 浅谈js二维码扫码登录是什么原理

    浅谈js二维码扫码登录是什么原理

    目录 二维码登录的本质 认识二维码 系统认证机制 扫描二维码登录的一般步骤 大概流程 二维码准备 扫描状态切换 状态确认 总结 前几天看了极客时间一个二维码的视频,写的不错,这里总结下 在日常生活中,二维码出现在很多场景,比如超市支付.系统登录.应用下载等等.了解二维码的原理,可以为技术人员在技术选型时提供新的思路.对于非技术人员呢,除了解惑,还可以引导他更好地辨别生活中遇到的各种二维码,防止上当受骗. 二维码,大家再熟悉不过了 购物扫个码,吃饭扫个码,坐公交也扫个码 在扫码的过程中,大家可能会

  • 使用javascript解析二维码的三种方式

    目录 一.使用javascript解析二维码 1.二维码是什么 二.qrcode-parser 1.安装方式 2.使用方式 三.ngx-qrcode2 1.安装方式 2.使用方式 四.前端生成二维码 1.安装方式 2.使用方式 3.案例一:生成二维码的代码模板 4.案例二:读取二维码 一.使用javascript解析二维码 1.二维码是什么 二维码就是将我们能看懂的文字语言,以机器语言的形式存储了起来.其中黑色小方块代表的是1,白色小方块代表的是0,黑白相间的图案其实就是一串编码,扫码的过程就是

  • JS实现扫码枪扫描二维码功能

    扫码枪扫描二维码,具体内容如下所示: 业务需求要将数据生成二维码,并用扫码枪扫出数据上传到服务端. 先上代码吧,之后再完善注意点 this.start = new Date().getTime() let code = '' let lastTime, nextTime let lastCode, nextCode let that = this window.document.onkeypress = function (e) { if (window.event) { // IE nextC

  • 二维码条形码生成的JavaScript脚本库

    二维码条形码生成的JavaScript脚本库

    目录 引言 条形码 二维码 引言 二维码或条形码在日常生活中现在应用已经非常普遍了,文章分享生成条形码和二维码的JavaScript库. 条形码 条形码是日常生活中比较常见的,主要用于商品.通俗的理解就是一串字符串的集合(含字母.数字及其它ASCII字符的集合应用),用来常用来标识一个货品的唯一性,当然还有更多更深入与广泛的应用,像超市的商品.衣服.微信.支付宝.小程序等到处都有条形码的广泛应用: 安装依赖: npm install jsbarcode --save-dev 在 HTML 页面上

  • js中调用微信的扫描二维码功能的实现代码

    关键代码 <html> <head> <title> js调用微信扫一扫功能测试 </title> <!--引用微信JS库--> <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <!--引用jQuery库--> <script t

  • js生成二维码的示例代码

    js生成二维码的示例代码

    前段时间项目中需要开发扫描二维码查看信息的功能,在网上查了一些资料,把用过的方法进行总结需要导入一个qrcode的js 插件. 插件链接: qrcode.js下载地址,点击即可下载 一.一个简单的示例 如下:(仅供参考) <%-- Created by IntelliJ IDEA. User: ASUS author:xumz Date: 2021/2/27 Time: 10:33 搬运请备注 To change this template use File | Settings | File

  • llqrcode js识别二维码解析二维码信息实例

    llqrcode js识别二维码解析二维码信息实例

    目录 正文 代码 正文 llqrcode.js具有扫描二维码功能,用来进行从图片中识别二维码,可解析二维码的信息. 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>llqrcode识别二维码</title> <script src="llqrcode.js"></script> <scri

  • 微前端架构ModuleFederationPlugin源码解析

    微前端架构ModuleFederationPlugin源码解析

    目录 序言 背景 MF 基本介绍 应用场景 微前端架构 服务化的 library 和 components ModuleFederationPlugin 源码解析 入口源码 Exposes Remotes Shared 小结 总结 序言 本文是 Webpack ModuleFederationPlugin(后面简称 MF) 源码解析 文章中的第一篇,在此系列文章中,我将带领大家抽丝剥茧.一步步地去解析 MF 源码.当然为了帮助大家理解,可能中间也会涉及到 Webpack 源码中的其它实现,我会根

  • Java实现的生成二维码和解析二维码URL操作示例

    本文实例讲述了Java实现的生成二维码和解析二维码URL操作.分享给大家供大家参考,具体如下: 二维码依赖jar包,zxing <!-- 二维码依赖 start --> <dependency> <groupId>com.google.zxing</groupId> <artifactId>javase</artifactId> <version>3.0.0</version> </dependency&

  • 如何用Python生成二维码、解析二维码

    如何用Python生成二维码、解析二维码

    楔子 二维码在我们的生活中可以说是必不可少的,不单单是手机支付.其它很多地方也都需要扫描二维码.那么下面我们就来看看如何使用python来生成二维码.以及识别二维码. 关于二维码,我们来说一下它的结构.当然关于二维码的结构其实不是太重要,这里只是提一下,没兴趣可以不用看. 从图中我们可以看出二维码结构整体划分为功能图形和编码区两大部分,功能图形又细分为:空白区.位置探测图形.位置探测图形分隔符.定位图形.校正图形,而编码区细分为:格式信息.版本信息.数据和纠错码字,来简单了解一下每一部分的功能:

  • Android中二维码的生成方法(普通二维码、中心Logo 二维码、及扫描解析二维码)

    Android中二维码的生成方法(普通二维码、中心Logo 二维码、及扫描解析二维码)

    首先声明我们通篇用的都是Google开源框架Zxing,要实现的功能有三个 ,生成普通二维码.生成带有中心图片Logo 的二维码,扫描解析二维码,直接上效果图吧 首先我们需要一个这样的 Zxing 的包类似于这样 接下来需要引入资源 1.drawable 中引入图片 navbar.png 2.layout中引入camera.xml.main.xml.qrcode_capture_page.xml 3.创建raw文件夹并添加beep.ogg 扫描声音 4.合并color.xml,copy ids.

  • java中ZXing 生成、解析二维码图片的小示例

    java中ZXing 生成、解析二维码图片的小示例

    概述 ZXing 是一个开源 Java 类库用于解析多种格式的 1D/2D 条形码.目标是能够对QR编码.Data Matrix.UPC的1D条形码进行解码. 其提供了多种平台下的客户端包括:J2ME.J2SE和Android. 官网:ZXing github仓库 实战 本例演示如何在一个非 android 的 Java 项目中使用 ZXing 来生成.解析二维码图片. 安装 maven项目只需引入依赖: <dependency> <groupId>com.google.zxing

  • asp.net C#生成和解析二维码的实例代码

    类库文件我们在文件最后面下载 [ThoughtWorks.QRCode.dll 就是类库] 使用时需要增加: 复制代码 代码如下: using ThoughtWorks.QRCode.Codec; using ThoughtWorks.QRCode.Codec.Data; using ThoughtWorks.QRCode.Codec.Util; 主要源代码: 1.生成二维码 复制代码 代码如下: QRCodeEncoder qrCodeEncoder = new QRCodeEncoder()

  • 使用python写的opencv实时监测和解析二维码和条形码

    今天,我实现了一个很有趣的demo,它可以在视频里找到并解析二维码,然后把解析的内容实时在屏幕上显示出来. 然后我们直入主题,首先你得确保你装了opencv,python,zbar等环境.然后这个教程对于学过opencv的人可能更好理解,但是没学过也无妨,到时候也可以直接用. 比如我的电脑上的环境是opencv2.4.x,python2.7,和最新的zbar,在Ubuntu 12.12的系统下运行的 假设你的opencv已经安装好了,那么我们就可以安装zbar 你可以先更新一下 sudo apt

  • Thinkphp使用Zxing扩展库解析二维码内容图文讲解

    Thinkphp使用Zxing扩展库解析二维码内容图文讲解

    一.下载PHP版本的Zxing扩展库 下载地址:https://github.com/khanamiryan/php-qrcode-detector-decoder 二.使用Zxing扩展库 1.文件下载好后,直接解压,结构如下,我们只需要lib这个文件夹 2.将lib文件夹重命名为Zxing,然后打开Zxing目录下的QrReader.php文件,可以发现命名空间是Zxing 3.接下来就很简单了,把Zxing文件夹放到thnikphp的扩展目录extend里 4.报错 Fatal error

随机推荐