<!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. 2FA双因素认证 - 原理和应用

    主页 个人微信公众号:密码应用技术实战 个人博客园首页:https://www.cnblogs.com/informatics/ 引言 我们在登陆网站.或者通过VPN访问公司内网时,除了输入用户口令外 ...

  2. [学习笔记]Rocket.Chat业务数据备份

    Rocket.Chat 的业务数据主要存储于mongodb数据库的rocketchat库中,聊天中通过发送文件功能产生的文件储存于/app/uploads中(文件方式设置为"FileSyst ...

  3. idea 暂存 Stash Changes Git/Repository/Stash Changes 恢复暂存 UnStash Changes

    idea 暂存 Stash Changes Git/Repository/Stash Changes 恢复暂存 UnStash Changes git stash save "save me ...

  4. Android Webview判断网页加载完毕

    原文: Android Webview判断网页加载完毕 - Stars-One的杂货小窝 书接上文,在Android WebView获取html源码 - Stars-One的杂货小窝此文讲到没有一个可 ...

  5. day03-自己实现Mybatis底层机制-02

    自己实现Mybatis底层机制-02 7.任务阶段4&5 阶段4任务:开发Mapper接口和Mapper.xml 阶段5任务:开发和Mapper接口相映射的MapperBean (1)Mapp ...

  6. 算法研究之快速排序java版

    很早之前就已经接触过快速排序算法了,面试当中也屡屡被问到,虽然明白其原理,但从未真正的用代码敲出来. 写关于算法的代码之前一定要原理想明白,不然就是盲目,在参考有关资料及自己的沉思之后,写出如下代码, ...

  7. 巧用Maya轴心操作小技巧，工作事半功倍！

    Maya 是一款专业的三维软件,可以用于创建规模宏大的世界.复杂的角色和炫酷的特效.Maya的用户遍布动画行业.影视特效.广告和片头.平面设计行业,用户数量十分庞大.本文分享了maya轴心操作的小技巧 ...

  8. 使用现代身份验证（OAuth）来连接POP、IMAP或SMTP

    我的博客园:https://www.cnblogs.com/CQman/ 转载: https://mp.weixin.qq.com/s?__biz=MzU0MzUxMzU2NA==&mid=2 ...

  9. STL:vector中如何使用at()来避免程序报错

    #include <iostream> #include <vector> using namespace std; int main() { vector<int> ...

  10. 二次元 & 动漫壁纸网站（内容记录）

    前言 天天和电脑.手机以及平板等电子设备打交道,一个好看的桌面壁纸图片当然是必不可少的,也曾经分享过<值得珍藏的高清壁纸网站推荐>,各种类型和分辨率的壁纸都有. 今天再分享些「高清二次元& ...