1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>图片二维码识别</title>
  6.         <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  7.         <script src="https://cozmo.github.io/jsQR/jsQR.js"></script>
  8.     </head>
  9.     <body>
  10.         <span lan_id="bc">选择图片</span> <input type="file"  id="pictureChange"/>
  11.         <div>
  12.             <h2>识别结果：</h2>
  13.             <ul id="result">
  14.             </ul>
  15.         </div>
  16.     </body>
  17.     <script type="text/javascript">
  18.         $("body").append('<canvas id="qrcanvas" style="display:none;"></canvas>')
  19.         $("#pictureChange").change(function (e) {
  20.             var file = e.target.files[0];
  21.             if(window.FileReader) {
  22.                 var fr = new FileReader();
  23.                 fr.readAsDataURL(file);
  24.                 fr.onloadend = function(e) {
  25.                     var base64Data = e.target.result;
  26.                     base64ToqR(base64Data)
  27.                 }
  28.             }
  29.         })
  30.         function base64ToqR(data) {
  31.             var c = document.getElementById("qrcanvas");
  32.             var ctx = c.getContext("2d");
  33.  
  34.             var img = new Image();
  35.             img.src = data;
  36.             img.onload = function() {
  37.                 $("#qrcanvas").attr("width",img.width)
  38.                 $("#qrcanvas").attr("height",img.height)
  39.                 ctx.drawImage(img, 0, 0, img.width, img.height);
  40.                 var imageData = ctx.getImageData(0, 0, img.width, img.height);
  41.                 const code = jsQR(imageData.data, imageData.width, imageData.height, {
  42.                     inversionAttempts: "dontInvert",
  43.                 });
  44.                 if(code){
  45.                     showCode(code.data)
  46.                 }else{
  47.                     alert("识别错误")
  48.                 }
  49.             };
  50.         }
  51.         function showCode(code){
  52.             $("#result").append("<li>"+code+"</li>")
  53.         }
  54.     </script>
  55. </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. Python实现企业微信自动打卡程序二：跳过节假日，随机打卡时间，定时任务，失败通知

    一.介绍 在上节 Python实现企业微信上下班自动打卡程序内容之后,我们继续优化自动打卡程序.接下来增加如下内容: 实现打卡时间随机范围 处理节假日不打卡的情况 实现定时调度打卡 打卡成功或失败通知 ...

  2. 基于 XAF Blazor 的规则引擎编辑器

    开源项目地址:https://gitee.com/lowcodexaf/rules-engine-editor 前言 本项目是基于XAFBlazor的规则引擎编辑器,规则引擎采用的是微软开源的Rule ...

  3. Rabbit算法：轻量高效的加密利器

    Rabbit算法起源: Rabbit算法是由Martin Boesgaard和Mette Vesterager提出的一种流密码算法,其设计初衷是为了提供高性能和高度安全性的加密方案.Rabbit算法结 ...

  4. 音频wav文件转sbc工具wav2sbc下载

    前记: 书到用时方恨少,工具用时方才发现好不到.为了一个工具,也是折腾了有一阵了. 工具说明: 在耳机中,各大芯片公司为了节省内存,本地播放的一般都是sbc格式文件,这就用到了wav转sbc文件的软件 ...

  5. Miracast技术详解（二）：RTSP协议

    目录 RTSP概述 抓包准备 WFD能力协商(Capability Negotiation) RTSP M1 Messages RTSP M2 Messages RTSP M3 Messages RT ...

  6. docker相关命令杂理

    - 2020.11.16docker commit [OPTIONS] CONTAINER [REPOSITORY[:TAG]] #保存现有的镜像 # docker commit -a "r ...

  7. 第145篇：js设计模式注册模式及相应实践

    好家伙,   0.索引  在阿里的低开项目中,使用这种形式去注册组件,我不禁好奇,这到底是个什么玩意 1.概念 在 JavaScript 中,注册模式(Registry Pattern)是一种设计模式 ...

  8. Java jdbcTemplate 获取数据表结构

    表结构如图 代码 @Autowired JdbcTemplate jdbcTemplate; @Test public void getColumnNames() throws Exception { ...

  9. STAR法则是什么（如何把一件事表达清楚）

    STAR法则,即为Situation Task Action Result的缩写,具体含义是: Situation: 事情是在什么情况下发生 Task: 你是如何明确你的任务的 Action: 针对这 ...

  10. Python爬虫爬取国家统计局网站【统计用区划和城乡划分代码】并存入MySQL数据库

    国家统计局网站相关分级页面截图 基本思路 爬取每个页面的a标签内容,生成省市两级数据字典,最后合成区县对应的链接,爬取第三层区划代码和名字,结合省市两级名字生成最后的标准. 代码 1 import p ...