前端js解析识别图片二维码
- <!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解析识别图片二维码的更多相关文章
- com.google.zxing.NotFoundException-识别图片二维码信息错误
一.问题由来 自己在做一个小程序项目的后台,其中需要使用到识别图片二维码信息,而且是必须在Java后台进行识别二维码操作.去百度里面很快找到一个方法, 可以识别简单的二维码,而且自己生成的简单的二维码 ...
- android 图片二维码识别和保存(二)
续上一篇,开发图片二维码识别功能后,我们对功能进行性能分析内存占用显著提高了,不使用该功能内存占用大约是147M,使用这个功能多次以后,高达203M. 因此对功能进行研究,发现每次生成的图片没有即时的 ...
- android 图片二维码识别和保存(一)
最新业务开发二维码识别的功能,这个功能,在很多应用上都有,比如微信长按图片识别二维码,如果图片中存在可以识别的二维码时,可以增加一个选项 识别二维码.那么如何去实现这个功能呢.这里其实也非常简单,首先 ...
- javascript利用canvas解析图片中的二维码
本方法两种应用方式:一种使用canvas解析本站图片中的二维码,canvas有同源策略限制,只能处理本站图片.另一种处理文件选择中的图片二维码. 第一种使用场景可以换成像微信中一样,长按图片识别二维码 ...
- 【转】Delphi+Halcon实战一:两行代码识别QR二维码
Delphi+Halcon实战一:两行代码识别QR二维码 感谢网友:绝代双椒( QQ号应原作者要求隐藏了:xxxx6348)的支持 本文是绝代双椒的作品,因为最近在忙zw量化培训,和ziwang.co ...
- asp.net 生成、解析条形码和二维码
原文 asp.net 生成.解析条形码和二维码 一.条形码 一维码,俗称条形码,广泛的用于电子工业等行业.比如我们常见的书籍背面就会有条形码,通过扫描枪等设备扫描就可以获得书籍的ISBN(Intern ...
- jquery.qrcode.min.js(支持中文转化二维码)
详情请看:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/jqueryqrcodeminjs/ 今天还是要讲一下关于二维码的知识,前 ...
- zxing 如何识别反转二维码
说起二维码扫描,估计很多人用的是 zxing 吧. 然而 zxing 虽然好用,但是却有一些坑. 这边分析一下自己实际项目遇到的一个坑. 什么坑呢? 下面举个栗子你就懂了. 这边生成二维码使用的是网络 ...
- online QRcode generator , QRcode=== (Quick Response Code) , 二维条码,二维码,彩色二维码,图片二维码,
online QRcode generator , QRcode=== (Quick Response Code) , 二维条码,二维码,彩色二维码,图片二维码, 1 http://cli.i ...
- 如何通过github上传项目并在readme.md中展示图片二维码
将本地项目上传至github 第一步:git init (创建仓库) 第二步:git add README.md (添加项目)git add * 第三步:git commit -m &qu ...
随机推荐
- court 法院 单词记忆
court 围绕得到 - 法院 讨好 c 表示得到 catch助记 ourt = turn = around = 围绕 围绕得到某一事物的地方或者行为 英[kɔːt],美[kɔrt] n. 法院, 法 ...
- electron打包踩过的坑总结 好文
electron打包踩过的坑总结 https://segmentfault.com/a/1190000018533945
- windows10 中为文件添加让自己可以使用查看、修改、运行的权限
在Win10中添加权限的方法 前一段时间重装了系统,然后,突然间就因为权限原因没法查看一些文件了.所以就想办法添加权限.尝试很多次后终于成功了,这篇文章记录一下如何为自己添加权限. 选中需要添加权限的 ...
- K8S通过Yaml部署Nacos,注册服务报错503
报错信息: ErrCode:503, ErrMsg:server is DOWN now .detailed error message: Optional[Distro protocol XXXX] ...
- 几个常用的cmd命令
compmgmt.msc 计算机管理 devmgmt.msc 设备管理器 diskmgmt.msc 磁盘管理工具 dfrg.msc 磁盘碎片整理 eventvwr.msc 事件查看器 fsm ...
- android使用StringRequest访问网站接收JSON时空指针报错
報錯詳情: 代碼詳情: 报错原因:他丫变量名与JSON格式中的变量名不同
- autowired循环调用
下面这段代码,表示那你的bean进行了循环调用. org.springframework.beans.factory.BeanCreationException: Error creating bea ...
- 亮点抢先看!4月16-17日,百度Create大会开设“AI公开课”,大咖带你打造赚钱工具
3月16日,2024百度Create AI开发者大会正式开放售票,嘉宾套票定价399元.据悉,本次大会以"创造未来(Create the Future)"为主题,设有20+深度论坛 ...
- 三维模型OBJ格式轻量化的数据压缩与性能平衡分析
三维模型OBJ格式轻量化的数据压缩与性能平衡分析 三维模型的OBJ格式轻量化数据压缩在保持性能的同时,可以减小文件大小.提高加载速度和节省存储空间.然而,在进行数据压缩时,需要权衡压缩比率和模型质量之 ...
- 记录--记录用前端代替后端生成zip的过程,速度快了 57 倍!!!
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 业务场景: 产品有个功能是设置主题.类似手机自动切换壁纸,以及其他功能颜色,icon,字体等. 管理员需要在后端管理系统多次下载不同主题, ...