<!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. （一）Git 学习之为什么要学习 Git

    一.版本控制 1.1 何为版本控制 版本控制(Revision control)是一种在开发的过程中用于管理我们对文件.目录或工程等内容的修改历史,方便查看更改历史记录.备份,以便恢复以前的版本的软件 ...

  2. C#移除List中特定元素

    在List里面移除其中一个元素之后,原有的索引以及索引对应的值会发生改变,如果按照原有的索引值删除,就会误删除其它元素. 1.实现思路 原始List为A,将需要删除的元素放到一个List B里面,遍历 ...

  3. BKP备份寄存器&RTC实时时钟

    UNIX时间戳    time.h 三条路,上面主要作为系统时钟,中间的作为RTC时钟,下面的作为看门狗的时钟 与RTC有关的外部晶振(主电源断电不停)一般都i是32.768KHZ   2^15=32 ...

  4. hibernate之createQuery与createSQLQuery

    信息: java.lang.ClassCastException: [Ljava.lang.Object; cannot be cast to com.miracle.dm.doc.catalog.m ...

  5. 人人都是艺术家！AI工具Doodly让潦草手绘变精美画作

    AI绘画界太卷了,一天一个新东西,不久前刚给大家介绍了可以一秒出图的SDXL-Turbo,今天来聊一聊另一位重磅选手Doodly 有用过Stable Diffuison的小伙伴都知道,想要生成一张高质 ...

  6. CAST电子部单片机方向授课——串口通信 预习文档

    CAST电子部单片机方向授课--串口通信 预习文档 课前小准备 安装串口调试助手 第一步:进入Microsoft Store 第二步:在Microsoft Store中搜索 "串口调试助手& ...

  7. API和String字符串介绍

    API 1.如何使用Java已经写好的东西(方法,类) API(Application programming interface):应用程序编程接口 简单理解:API就是别人已经写好了的东西,我们不 ...

  8. 说说如何在Vue项目中应用TypeScript？

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一.前言 与link类似 在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator, 其是基 ...

  9. 记录-一个栗子让你彻底弄懂CSS3补间动画和逐帧动画

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 CSS3提供了Animation关键帧动画,我们在工作中比较常用.但在写CSS动画的时候,其实Animation能实现两种动画模式: 补间 ...

  10. js中订阅发布模式bus

    export default { list: {}, // 事件中心集中地 /** * 发布订阅 * @param {string} name 事件名 * @param [...args] */ $e ...