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识别解析二维码信息的资料请关注我们其它相关文章!

时间: 2022-11-09

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

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

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

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

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二维码扫码登录是什么原理

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

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

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

基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作

在很多项目里面,对条形码和二维码的生成和打印也是一种很常见的操作,在Web项目里面,我们可以利用JS生成条形码和二维码的组件有很多.本文引入两个比较广泛使用的JS组件,用来处理条形码和二维码的生成处理,并介绍如何利用CLODOP组件实现内容的打印输出. 生成条形码使用组件JsBarcode,生成二维码使用组件qrcodejs. 1.条形码的生成 条码的作用一般在一些商品标签上,方便使用条码枪快速.准确录入信息. 如下所示是一种条形码 这里条形码生成使用了JsBarcode组件进行处理,它支持很多

二维码的生成细节和原理

二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型:比如:字符,数字,日文,中文等等.这两天学习了一下二维码图片生成的相关细节,觉得这个玩意就是一个密码算法,在此写一这篇文章 ,揭露一下.供好学的人一同学习之. 关于QR Code Specification,可参看这个PDF:http://raidenii.net/files/datasheets/misc/qr_c

Android基于google Zxing实现二维码的生成

最近项目用到了二维码的生成与识别,之前没有接触这块,然后就上网搜了搜,发现有好多这方面的资源,特别是google Zxing对二维码的封装,实现的已经不错了,可以直接拿过来引用,下载了他们的源码后,只做了少少的改动,就是在Demo中增加了长按识别的功能,网上虽然也有长按识别的Demo,但好多下载下来却无法运行,然后总结了一下,加在了下面的Demo中.   下面来介绍这个Demo的主类 public class BarCodeTestActivity extends Activity { priv

基于canvas的二维码邀请函生成插件

这是17年的第一篇博文,话说这天又是产品同学跑过来问我说:hi,lenny,你看现在市面上流行各种装逼H5,随便输入点名字啥的就给我生成房产证了,这种还可以分享出去,传播率可高了,或者你再看这里,一键生成邀请函,牛逼吧,要不你也帮我做一个这个功能,我去玩点传播手段. 我看见效果后第一反映就是,肯定canvas进行的图片拼接,现在市面上流行的效果具体是如何实现的我没有去看源码,思路很清晰,于是晚饭后没有下班,开始我的插件制作之旅了. 首先,我们需要思考,既然是图片处理,那么就必然存在图片下载,我们

IOS笔记061之二维码的生成和扫描

如今二维码随处可见,无论是实物商品还是各种礼券都少不了二维码的身影.而手机等移动设备又成为二维码的一个很好的应用平台,不管是生成二维码还是扫码二维码.本篇文章从生成二维码.扫描二维码展开分析,通过内容分析二维码用起来也很easy了. 首先说下生成二维码 二维码可以存放纯文本.名片或者URL 其次生成二维码的步骤: 导入CoreImage框架 再次通过滤镜CIFilter生成二维码 1.创建过滤器 2.恢复滤镜的默认属性 3.设置内容 4.获取输出文件 5.显示二维码 代码实现 CoreImage

iOS二维码的生成代码

本文实例为大家分享了iOS二维码的生成代码,供大家参考,具体内容如下 一.工程图. 二.代码. ViewController.m #import "ViewController.h" #import "ScanViewController.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // D

iOS二维码的生成和扫描

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 属性 @property (strong,nonatomic)AVCaptureDevice * device; @property (strong,nonatomic)AVCaptureDeviceInput * input; @property (strong,nonatomic)AVCaptureMetadataOutput * output; @property (strong,nonatomic)AV

Android编程实现二维码的生成与解析

本文实例讲述了Android编程实现二维码的生成与解析.分享给大家供大家参考,具体如下: 直接上代码,代码上面有具体的解析,并且提供jar供下载:二维码Jar包.rar. 根据文本生成对应的二维码: // 生成QR图 private void createImage() { try { // 需要引入core包 QRCodeWriter writer = new QRCodeWriter(); String text = qr_text.getText().toString(); Log.i(T

unityZXing二维码的生成与扫描

本文实例为大家分享了unityZXing二维码生成与扫描的具体代码,供大家参考,具体内容如下 借鉴自某位大佬不记得了 using System.Collections; using System.Collections.Generic; using UnityEngine; using ZXing; using UnityEngine.UI; /// <summary> /// 二维码扫描识别功能 /// </summary> public class TestQRCodeScan

.NET C#利用ZXing生成、识别二维码/条形码

一.首先下载 ZXing.Net 地址是:http://zxingnet.codeplex.com/releases/view/117068 然后将对应版本 .dll 拖入项目中,再引用之. 主要是用 BarcodeWriter.BarcodeReader. 二.生成二维码 .NET 平台的代码始终要简单些. QrCodeEncodingOptions options = new QrCodeEncodingOptions(); options.CharacterSet = "UTF-8&quo