前端js解析识别图片二维码

<!--* author:wenqd* email:309820722@qq.com* date:2019-09-18 09:34
-->
<!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>

转载于:https://www.cnblogs.com/wenqd/p/11541030.html

前端js解析识别图片二维码相关推荐

Android 识别图片二维码
zxing依赖: compile 'cn.yipianfengye.android:zxing-library:2.2' 初始化:private String SAVE_PIC_PATH = Envi ...
Android实现二维码扫描功能-ZXing识别图片二维码，相册选图
文章目录 1.演示 2.权限问题 3.实现步骤 4.工具类 5.图片Uri处理(重要更新) 1.演示 2.权限问题部分朋友在打开相册时遇到读写权限未授权的问题,我在开发的时候没有遇到,也没有注册读写 ...
VS2010中使用zxing识别图片二维码
在PC端识别图片二维码有ZXing和OpenCV等方式,Opencv4.0也已经在逐步实现和完善这类的功能.在实际项目工程中,通过使用ZXing编译的库文件,在VC2010中的使用MFC框架实现,动态 ...
python 检查图品二维码，识别图片二维码
代码识别图片二维码方法大体分两种 1.查资料理解二维码生成原理,自己搬砖解码 2.是有类库(第三方包) 二维码中包含的信息: 空白区(边界) 位置探测区分隔符定位图形矫正图形格式信息版本 ...
小程序长按识别图片二维码、小程序码
三种在小程序中识别图片二维码的方式的对比 image标签 + show long press menu <image src="https://img.qr.com/qr.jpg&qu ...
解决Zxing解析本地图片二维码，识别率低，识别不出来的问题！
(又做了一些优化,就是在原来的基础上添加上了zbar识别二维码的功能,就是先对图片进行处理,然后通过zxing识别,如果zxing识别失败,再通过zbar识别 20170329) 最近项目里让添加本地 ...
Android实现二维码扫描功能（四）-ZXing识别图片二维码，相册选图
简介上一篇 Android实现二维码扫描功能(三)-闪光灯控制介绍了光线较弱情况下开启闪光灯来辅助二维码识别的方法. 本篇我们介绍如何识别相册中的图片(含二维码) 动态演示使用模拟器录制了动画演示 ...
【长按图片识别】uniapp vue开发时，点击图片识别—实现转发、收藏、识别图片二维码
1.html代码: <image show-menu-by-longpress="true" @click="previewImage" src=&quo ...
前端js html转换成pdf可下载打印；前端js可批量生成条形码；前端js可批量生成二维码，生成letter标签
注意:本文调试的是letter纸尺寸前端js html转换成pdf可下载打印 html2canvas + jspdf 前端js生成条形码 Options · lindell/JsBarcode ...

前端js解析识别图片二维码

前端js解析识别图片二维码相关推荐

最新文章

热门文章