原生js\h5识别二维码

<!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\h5识别二维码相关推荐

原生js链接转二维码
1.下载jquery.qrcode.min.js文件,文件内容如下: (function(r){r.fn.qrcode=function(h){var s;function u(a){this.mod ...
移动端H5(JavaScript)识别二维码功能
前言时隔一年多, 再次接触到H5识别二维码功能,这次直接写个demo方便大家学习和使用.(其实是方便自己抄自己代码-). 直接上代码 QRcode下载地址长的好看的都点⭐了!!! <!DOC ...
移动端（ios and android）长按识别二维码（含js与原生互调）
这篇文章就整理下移动端长按识别二维码的实现吧!实现方式可以分为三种一.长按原生控件,直接获取控件中的图片数据(src或background) 二.长按原生控件,截图识别三.长按web中的图片,ap ...
js 通过摄像头识别二维码，可以控制闪光灯。原生 HTML 调用摄像头，有原生HTML + JS 版本和 VUE3 + TS 版本与 uniapp 版本
开发背景最开始公司说到这个需求的时候第一个想法是使用微信的 js SDK 接入微信的扫一扫.但是得知所做的这个功能模块是需要嵌入到之前开发的app中,所以就只有使用 js 原生的 API 来开发了. ...
微信H5实现网页长按保存图片及识别二维码
实现微信H5实现网页长按保存图片及识别二维码使用工具 html2canvas 官方文档 html2canvas.hertzen.com/ canvas2image github.com/hongru ...
H5页面长按识别二维码
vue 写的H5 ,内嵌在小程序上 <img src="图片路径" style="width: 200px;background-size:100% 100%;he ...
H5移动版识别二维码和条形码
H5移动版识别二维码和条形码(PC和移动端都兼容) 一.需要引入JS文件 <script src="https://www.jq22.com/jquery/jquery-1.10.2. ...
H5案例分享：jquery.qrcode.js生成简易二维码
近期做项目需要生成二维码,并且解码获取信息,jquery.qrcode.js生成二维码比较的方便,写个教程分享给大家.欢迎大家测试留言,我会改进代码. 现在二维码越来越流行啦,支付扫二维码,关注扫二维 ...
html+js 调用摄像头识别二维码
1. html调起摄像头,参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia 2.识别二维码 ...

原生js\h5识别二维码

原生js\h5识别二维码相关推荐

最新文章

热门文章