<!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. 本地画板工具 Axure RP 9 顶替 drawio （补充Axure RP 8）

    本地画板工具 Axure RP 9 顶替 drawio 外链:https://wws.lanzoul.com/b03paemkf 密码:dmvj 9这个版本 win7 不支持 Axure RP 8 h ...

  2. 替换掉Chrome浏览器的新标签页【已做好自己的插件，并提供下载】

    https://jingyan.baidu.com/article/fc07f9891b256312ffe5190a.html 我做好了自己的 Chrome 新插件 https://files.cnb ...

  3. Docker 安装成功（win10家庭版）

    https://desktop.docker.com/win/stable/Docker Desktop Installer.exe 安装遇到了 然后 更新 这个 https://wslstorest ...

  4. arch安装xfce4的时候，出现无法设置开机启动的问题

    sudo systemctl enable lightdm   Failed to enable unit: File /etc/systemd/system/display-manager.serv ...

  5. 基于stm32的spi接口dma 数据收发实例解析

    一 前记 SPI接口平时用的比较少,再加上对CUBEMX不是很熟悉,这里踩了不少坑才把问题解决.针对遇到了不少问题,是要值得梳理一下了. 二 源码解析 1 SPI的DMA发送端配置: 2 主函数源码: ...

  6. Android CheckBox控件去除图标 样式改造

    有个UI需要实现下面这种效果,但我之前是使用的CheckBox,本着能改就改的原则,还是把CheckBox改造一份,终于是实现了图中的效果 过程 1.去除CheckBox的左侧图标 CheckBox默 ...

  7. AOSP编译成功后关闭终端emulator命令找不到

    当我们编译好AOSP系统源码后,可以通过emulator命令打开模拟器,但是当我们关闭终端后,在次打开终端输入emulator命令,提示未找到命令: 此时我们需要重新执行下面语句 source bui ...

  8. terminate called after throwing an instance of 'std::regex_error'（C++11）

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...

  9. mysql迁移到pqsql笔记

    在将MySQL迁移到PostgreSQL的过程中,遇到了一些问题,下面是一些简单的解决方案. 使用命令,初始化数据库,并设置postgres的密码 bin\initdb -E UTF-8 -A md5 ...

  10. C#调用百度翻译API自动将中文转化为英文

    1.百度翻译开放平台在平台申请你自己的appid,和密钥 2.开通后就在我提供的gitee链接下载代码,直接修改秘钥和appid就能使用如下图所示 3.Gitee链接:链接 4.https://git ...