<!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. 解决 Genymotion 显示‘unable to start the virtual device’的问题

    ·解决方案 以管理员身份运行以下命令: bcdedit /set hypervisorlaunchtype off ,然后重启电脑,打开模拟器即可. 注意,一定是以[管理员]的身份运行的[命令提示符] ...

  2. redis开启多端口

    Centos安装多端口的redis服务 背景 redis默认端口6379,由于开发需要,key有重复.于是另起端口6380. 配置服务过程 1.新建/etc/redis6380.conf,内容如下: ...

  3. vue3 如果用ts，导出时候要用 defineComponent，这俩是配对的，为了类型的审查正确

    vue3 如果用ts,导出时候要用 defineComponent,这俩是配对的,为了类型的审查正确

  4. 完美解决浏览器输入http被自动跳转至https问题

    查阅相关资料,发现这是浏览器的HSTS(HTTP Strict Transport Security)功能引起的.在安装配置SSL证书时,可以使用一种能使数据传输更加安全的Web安全协议,即在服务器端 ...

  5. Android 发布aar远程依赖出现扩展方法无法找到问题

    原文: Android 发布aar远程依赖出现扩展方法无法找到问题-Stars-One的杂货小窝 起因 最近在整合自己的工具类库,偶然发现之前写的扩展方法使用远程依赖却是提示找不到 但我有个aar库却 ...

  6. Base MYSQL Database create stored procedures resolve the Delimiter error

    Base MYSQL Database create stored procedures resolve the Delimiter error, It must be created using a ...

  7. 记录--用js如何实现将手机号中间的几位数字变成****

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 今天,我们要实现一个很常见并且简单的功能:将手机号中间的几位数变成**** 这个功能其实很常见,比如我们微信的账号安全里面显示的手机号.掘 ...

  8. 创建远程仓库&克隆项目(Github)

    创建远程仓库 在GitHub上注册一个账号,之后creat a new repository 创建的远程仓库把它看作一个百度网盘就可以了 克隆项目 1.远程仓库可以下载\克隆到本地 code :git ...

  9. KingbaseES分区表 -- 声明式创建分区表

    一.声明式创建分区: 1. 创建分区表同时创建分区: 1.1 准备环境: # 创建分区表同时创建分区 create table tb1(id bigint,stat date,no bigint,pd ...

  10. #单位根反演，二项式定理#LOJ 6247 九个太阳

    题目 \[\large {\sum_{i=0}^n[k|i]C(n,i)}\pmod {998244353} \] 其中\(n\leq 10^{18}\),\(k=2^p,p\in [0,20]\) ...