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. court 法院 单词记忆

    court 围绕得到 - 法院 讨好 c 表示得到 catch助记 ourt = turn = around = 围绕 围绕得到某一事物的地方或者行为 英[kɔːt],美[kɔrt] n. 法院, 法 ...

  2. electron打包踩过的坑总结 好文

    electron打包踩过的坑总结 https://segmentfault.com/a/1190000018533945

  3. windows10 中为文件添加让自己可以使用查看、修改、运行的权限

    在Win10中添加权限的方法 前一段时间重装了系统,然后,突然间就因为权限原因没法查看一些文件了.所以就想办法添加权限.尝试很多次后终于成功了,这篇文章记录一下如何为自己添加权限. 选中需要添加权限的 ...

  4. K8S通过Yaml部署Nacos,注册服务报错503

    报错信息: ErrCode:503, ErrMsg:server is DOWN now .detailed error message: Optional[Distro protocol XXXX] ...

  5. 几个常用的cmd命令

    compmgmt.msc 计算机管理  devmgmt.msc 设备管理器  diskmgmt.msc 磁盘管理工具  dfrg.msc 磁盘碎片整理  eventvwr.msc 事件查看器  fsm ...

  6. android使用StringRequest访问网站接收JSON时空指针报错

    報錯詳情: 代碼詳情: 报错原因:他丫变量名与JSON格式中的变量名不同

  7. autowired循环调用

    下面这段代码,表示那你的bean进行了循环调用. org.springframework.beans.factory.BeanCreationException: Error creating bea ...

  8. 亮点抢先看!4月16-17日,百度Create大会开设“AI公开课”,大咖带你打造赚钱工具

    3月16日,2024百度Create AI开发者大会正式开放售票,嘉宾套票定价399元.据悉,本次大会以"创造未来(Create the Future)"为主题,设有20+深度论坛 ...

  9. 三维模型OBJ格式轻量化的数据压缩与性能平衡分析

    三维模型OBJ格式轻量化的数据压缩与性能平衡分析 三维模型的OBJ格式轻量化数据压缩在保持性能的同时,可以减小文件大小.提高加载速度和节省存储空间.然而,在进行数据压缩时,需要权衡压缩比率和模型质量之 ...

  10. 记录--记录用前端代替后端生成zip的过程,速度快了 57 倍!!!

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 业务场景: 产品有个功能是设置主题.类似手机自动切换壁纸,以及其他功能颜色,icon,字体等. 管理员需要在后端管理系统多次下载不同主题, ...