<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>图片二维码识别</title>

        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.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>

    </body>

    <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>

</html>

前端js解析识别图片二维码的更多相关文章

  1. com.google.zxing.NotFoundException-识别图片二维码信息错误

    一.问题由来 自己在做一个小程序项目的后台,其中需要使用到识别图片二维码信息,而且是必须在Java后台进行识别二维码操作.去百度里面很快找到一个方法, 可以识别简单的二维码,而且自己生成的简单的二维码 ...

  2. android 图片二维码识别和保存(二)

    续上一篇,开发图片二维码识别功能后,我们对功能进行性能分析内存占用显著提高了,不使用该功能内存占用大约是147M,使用这个功能多次以后,高达203M. 因此对功能进行研究,发现每次生成的图片没有即时的 ...

  3. android 图片二维码识别和保存(一)

    最新业务开发二维码识别的功能,这个功能,在很多应用上都有,比如微信长按图片识别二维码,如果图片中存在可以识别的二维码时,可以增加一个选项 识别二维码.那么如何去实现这个功能呢.这里其实也非常简单,首先 ...

  4. javascript利用canvas解析图片中的二维码

    本方法两种应用方式:一种使用canvas解析本站图片中的二维码,canvas有同源策略限制,只能处理本站图片.另一种处理文件选择中的图片二维码. 第一种使用场景可以换成像微信中一样,长按图片识别二维码 ...

  5. 【转】Delphi+Halcon实战一：两行代码识别QR二维码

    Delphi+Halcon实战一:两行代码识别QR二维码 感谢网友:绝代双椒( QQ号应原作者要求隐藏了:xxxx6348)的支持 本文是绝代双椒的作品,因为最近在忙zw量化培训,和ziwang.co ...

  6. asp.net 生成、解析条形码和二维码

    原文 asp.net 生成.解析条形码和二维码 一.条形码 一维码,俗称条形码,广泛的用于电子工业等行业.比如我们常见的书籍背面就会有条形码,通过扫描枪等设备扫描就可以获得书籍的ISBN(Intern ...

  7. jquery.qrcode.min.js(支持中文转化二维码)

    详情请看:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/jqueryqrcodeminjs/ 今天还是要讲一下关于二维码的知识,前 ...

  8. zxing 如何识别反转二维码

    说起二维码扫描,估计很多人用的是 zxing 吧. 然而 zxing 虽然好用,但是却有一些坑. 这边分析一下自己实际项目遇到的一个坑. 什么坑呢? 下面举个栗子你就懂了. 这边生成二维码使用的是网络 ...

  9. online QRcode generator , QRcode=== (Quick Response Code) , 二维条码,二维码,彩色二维码,图片二维码,

    online QRcode generator ,  QRcode=== (Quick Response Code)    , 二维条码,二维码,彩色二维码,图片二维码, 1 http://cli.i ...

  10. 如何通过github上传项目并在readme.md中展示图片二维码

    将本地项目上传至github   第一步:git init (创建仓库)   第二步:git add README.md (添加项目)git add *   第三步:git commit -m &qu ...

随机推荐

  1. 闭关修炼180天----吐血整理MongoDB的学习笔记

    MongoDB 一.MongoDB体系结构 1.1 mongoDB和NoSql mongoDB是一种NoSql,是文档存储的代表. mongoDB是一个基于分布式文件存储的数据库.为web应用提供可扩 ...

  2. Prometheus技术分享——prometheus的函数与计算公式详解

    Prometheus与zabbix相比,它的强大之处就在于可以它可以使用的很多计算公式去获取自己需要的数据.当然,这里所涉及到的计算公式,也是我们普遍认为的难点所在.比如,我们要获取CPU使用率,使用 ...

  3. mybatis使用postgresql中的jsonb数据类型

    最近新开发的一个功能使用到postgresql中的jsonb数据类型.架构师可能考虑到这种数据格式更加便于存储json格式的数据,因此考虑使用这种数据类型.自己以前未曾使用过这种数据类型,因此需要现学 ...

  4. 火柴 基于everything的搜索软件 软件推荐 Ctrl+Ctrl 显示 tab转换 本机搜索和网络搜索

    https://www.huochaipro.com/

  5. SpringBoot 学习记录 2021.05.13 Started

    环境搭建 Spring Boot 2.x Java JDK 需要安装 JDK java8 也就是 1.8, 用 jdk-8u271-windows-x64.exe 网上有很多安装java8的教程,很简 ...

  6. pod的拉取和重启策略

    在Kubernetes中,Pod的拉取策略和重启策略可以通过YAML配置文件来定义. Pod的拉取策略 Pod的拉取策略指的是Kubernetes在创建或重启Pod时,如何获取Pod所需的容器镜像.这 ...

  7. 【数据结构】C语言实现动态扩容数组

    // resizable array /* Think about a set of functions that provide a mechanism of resizable array of ...

  8. Python3解决UnicodeDecodeError: 'utf-8' codec can't decode byte..问题最快解决方案

    问题: 使用python3 作为socket通信的时候,出现了这个错误:UnicodeDecodeError: 'utf-8' codec can't decode byte 0x92 in posi ...

  9. RTP网络包提取码流方法

    1.工具wireshark,官网最新的版本没有保存按键,建议使用3.4 链接:https://pan.baidu.com/s/1VHSGgojZPNtzyzV6RMVjkw 提取码:q51a 2.wi ...

  10. 【atcoder abc276 】（a* 搜索）

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...