<!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. C++左值右值完美转发转移

    左值(Lvalue)与右值(Rvalue) 英文含义: 左值(Lvalue):Locator value,意味着它指向一个具体的内存位置. 右值(Rvalue):Read value,指的是可以读取的 ...

  2. 告别os.path，拥抱pathlib

    pathlib 模块是在Python3.4版本中首次被引入到标准库中的,作为一个可选模块.从Python3.6开始,内置的 open 函数以及 os . shutil 和 os.path 模块中的各种 ...

  3. [VueJsDev] 日志 - nginxConfig 配置文件备份

    [VueJsDev] 目录列表 https://www.cnblogs.com/pengchenggang/p/17037320.html nginxConfig 配置文件备份 ::: details ...

  4. 分支合并规则 dev master v1.0.XX 三条分支的合并原则

    分支合并规则 dev master v1.0.XX 三条分支的合并原则

  5. SoftCnKiller 更新程序 bat 调用vbs 更新，下载gitee文件 更新自身数据

    bat @echo off title 更新流氓软件黑名单 cd /d "%~dp0" echo 请选择更新源,默认使用1.GitCode更新. echo.&choice ...

  6. dbvisualizer之编辑区中文乱码问题

    !在SQL Commander中,sql语句中如果有中文,显示是'口口口'. 解决办法如下: 在Tools->tool Properties->General->Appearance ...

  7. 文心一言 VS 讯飞星火 VS chatgpt （216）-- 算法导论16.2 3题

    三.假定在 0-1 背包问题中,商品的重量递增序与价值递减序完全一样.设计一个高效算法求此背包问题的变形的最优解,证明你的算法是正确的.如果要写代码,请用go语言. 文心一言: 在0-1背包问题中,如 ...

  8. KingbaseES 实现 MySQL 函数 last_insert_id

    用户从mysql迁移到金仓数据库过程中,应用中使用了mysql函数last_insert_id()来获取最近insert的那行记录的自增字段值. mysql文档中关于函数的说明和例子: LAST_IN ...

  9. Notion笔记汉化

    Notion笔记汉化 参考:https://github.com/Reamd7/notion-zh_CN 关注我的订阅号[靠谱杨阅读人生]回复[Notion]获取中文包 1.进入notion的安装路径 ...

  10. Python---flask框架实现清除cookies功能

    路由部分: 1 #用户退出清理cookie 2 @app.route('/clean_cookies',methods=['GET', 'POST']) 3 def clean_cookies(): ...