当前位置: 首页 > news >正文

前端如何识别上传的二维码---jsQR

npm

npm i -d jsqr

html

<el-button @click="$refs.input.click()">识别</el-button>
<input type="file" style="display: none" id="input" @input="upload">

js

import jsQR from "jsqr";decodeQRCode(image) {//创建画布const canvas = document.createElement('canvas');const context = canvas.getContext('2d');canvas.width = image.width;canvas.height = image.height;//把二维码画上去context.drawImage(image, 0, 0, canvas.width, canvas.height);const imageData = context.getImageData(0, 0, canvas.width, canvas.height);//jsQR识别出来const decodedResult = jsQR(imageData.data, imageData.width, imageData.height, {inversionAttempts: 'dontInvert',});if (decodedResult) {//返回识别结果return decodedResult.data} else {window.alert('未识别到二维码!'return ''}}upload(){let input = document.querySelector('#input')const file = input.files[0]if (file) {const reader = new FileReader();reader.onload = (e) => {const image = new Image();image.src = e.target.result;image.onload = () => {let code = this.decodeQRCode(image);console.log(code)//识别结果 };};reader.readAsDataURL(file);}
}

相关文章:

前端如何识别上传的二维码---jsQR

npm npm i -d jsqrhtml <el-button click"$refs.input.click()">识别</el-button> <input type"file" style"display: none" id"input" input"upload">js import jsQR from "jsqr";decodeQR…...

flink1.18.0 自定义函数 接收row类型的参数

比如sql中某字段类型 array<row<f1 string,f2 string,f3 string,f4 bigint>> 现在需要编写 tableFunction 需要接受的参数如上 解决方案 用户定义函数|阿帕奇弗林克 --- User-defined Functions | Apache Flink...

JDK8和JDK11在Ubuntu18上切换(解决nvvp启动报错)

本文主要介绍JDK8和JDK11在Ubuntu18上切换&#xff0c;以供读者能够理解该技术的定义、原理、应用。 &#x1f3ac;个人简介&#xff1a;一个全栈工程师的升级之路&#xff01; &#x1f4cb;个人专栏&#xff1a;计算机杂记 &#x1f380;CSDN主页 发狂的小花 &#x1f304;人…...

基于eleiment-plus的表格select控件

控件不是我写的&#xff0c;来源于scui,但在使用中遇到了一些问题&#xff0c;希望能把过程记录下来&#xff0c;同时把这个问题修复掉。 在使用的时候对控件进行二级封装&#xff0c;比如我的一个商品组件&#xff0c;再很多地方可以用到&#xff0c;于是 <template>&l…...

「❤️万文总结 时光回忆录❤️」那年,我在北京邮电大学计算机学院求学的日子

文章目录 关于我 | About Me梦绕西土城&#xff0c;邮情涌流 | Dreams and Connections in Haidian 北邮求学记 | My Days at BUPT岁月如歌&#xff0c;追忆往昔 | Reminiscing the Fleeting Years新篇章&#xff1a;班级与环境 | New Class, New Surroundings高压与挑战&#…...

【四 (1)数据可视化之如何选用正确的图表】

目录 文章导航一、数据分析中可视化的作用1、揭示数据关联和模式2、支持数据分析和决策3、提升沟通和共享效果4、强调关键信息和发现5、增强故事叙述和记忆效果6、有效增强数据交互性数据7、复杂信息易理解8、数据多维度显示 二、如何选用合适的图表1、简洁性避免使用过于复杂或…...

PHP<=7.4.21 Development Server源码泄露漏洞 例题

打开题目 dirsearch扫描发现存在shell.php 非预期解 访问shell.php&#xff0c;往下翻直接就看到了flag.. 正常解法 访问shell.php 看见php的版本是7.3.33 我们知道 PHP<7.4.21时通过php -S开起的WEB服务器存在源码泄露漏洞&#xff0c;可以将PHP文件作为静态文件直接输…...

大语言模型RAG-技术概览 (一)

大语言模型RAG-技术概览 (一) 一 RAG概览 检索增强生成&#xff08;Retrieval-AugmentedGeneration, RAG&#xff09;。即大模型在回答问题或生成问题时会先从大量的文档中检索相关的信息&#xff0c;然后基于这些信息进行回答。RAG很好的弥补了传统搜索方法和大模型两类技术…...

【嵌入式DIY实例】-DIY锂电池电压检测表

DIY锂电池电压检测表 文章目录 DIY锂电池电压检测表1、直流电压检测传感器介绍2、硬件准备3、代码实现4、OLED显示在电子应用中,通常需要使用到电池,电源管理是必不可少的部分。本文将详细介绍如何使用一个0-25V的直流电压传感器来检测锂电池的电压。 1、直流电压检测传感器介…...

生成baidu.com域名的私有证书:Linux系统命令示例

在Linux系统上生成一个针对xzyxdev.prec-tech.com域名的私有证书&#xff08;通常指的是自签名证书&#xff09;&#xff0c;你可以使用openssl工具。以下是一个简单的步骤和命令示例来生成这样的证书&#xff1a; 生成私钥 首先&#xff0c;你需要生成一个私钥。这通常是一个…...

小程序学习4 mock

services/home.js import { config, cdnBase } from ../../config/index;/** 获取首页数据 */ function mockFetchHome() {const { delay } require(../_utils/delay);const { genSwiperImageList } require(../../model/swiper);return delay().then(() > {return {swip…...

Unity3D MMORPG角色的UI血条管理详解

前言 在Unity3D游戏开发中&#xff0c;MMORPG&#xff08;Massively Multiplayer Online Role-Playing Game&#xff09;游戏是一种非常流行的游戏类型。在这种类型的游戏中&#xff0c;玩家通常可以选择不同的角色来进行游戏&#xff0c;而角色的血条管理是游戏中非常重要的一…...

【python】爬取杭州市二手房销售数据做数据分析【附源码】

一、背景 在数据分析和市场调研中&#xff0c;获取房地产数据是至关重要的一环。本文介绍了如何利用 Python 中的 requests、lxml 库以及 pandas 库&#xff0c;结合 XPath 解析网页信息&#xff0c;实现对链家网二手房销售数据的爬取&#xff0c;并将数据导出为 Excel 文件的过…...

Day34:安全开发-JavaEE应用反射机制攻击链类对象成员变量方法构造方法

目录 Java-反射-Class对象类获取 Java-反射-Field成员变量类获取 Java-反射-Method成员方法类获取 Java-反射-Constructor构造方法类获取 Java-反射-不安全命令执行&反序列化链构造 思维导图 Java知识点 功能&#xff1a;数据库操作&#xff0c;文件操作&#xff0c;…...

Transformer代码从零解读【Pytorch官方版本】

文章目录 1、Transformer大致有3大应用2、Transformer的整体结构图3、如何处理batch-size句子长度不一致问题4、MultiHeadAttention&#xff08;多头注意力机制&#xff09;5、前馈神经网络6、Encoder中的输入masked7、完整代码补充知识&#xff1a; 1、Transformer大致有3大应…...

安卓性能优化面试题 31-35

31. 简述Handler导致的内存泄露的原因以及如何解决 ?在Android开发中,Handler对象可能导致内存泄漏的主要原因是由于Handler持有对外部类对象的隐式引用,从而导致外部类无法被垃圾回收,进而引发内存泄漏。下面是导致Handler内存泄漏的几种常见情况及相应的解决方法: 1. 长…...

QML与C++通信

一、QML中如何使用C的类和对象 前提条件&#xff1a; 1.从 QObject 或 QObject 的派生类继承 2.使用 Q_OBJECT 宏 这两个条件是为了让一个类能够进入 Qt 强大的元对象系统&#xff08;meta-object system&#xff09;中&#xff0c;只有使用元对象系统&#xff0c;一个类的某些…...

Explain详解与索引优化最佳实践

Explain工具介绍 使用EXPLAIN关键字可以模拟优化器执行SQL语句,分析你的查询语句或是结构的性能瓶颈 在select语句之前增加explain关键字,MySQL会在查询前设置一个标记,执行查询会返回执行计划的信息,而不是执行这条SQL 注意: 如果from中包含子查询,仍会执行该子查询,将结果…...

Spring Boot轻松整合Minio实现文件上传下载功能【建议收藏】

一、Linux 安装Minio 安装 在/root/xxkfz/soft目录下面创建文件minio文件夹&#xff0c;进入minio文件夹&#xff0c;并创建data目录&#xff1b; [rootxxkfz soft]# mkdir minio [rootxxkfz soft]# cd minio [rootxxkfz minio]# mkdir data执行如下命令进行下载 [rootxxkf…...

MySql入门教程--MySQL数据库基础操作

꒰˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN …...

毕业设计实战:基于SSM+MySQL的健身中心管理系统设计与实现全攻略

毕业设计实战&#xff1a;基于SSMMySQL的健身中心管理系统设计与实现全攻略 在开发“健身中心管理系统”毕业设计时&#xff0c;我曾因一个看似简单的场地预约与器材租赁的并发冲突问题&#xff0c;踩了一个“深坑”。初期设计时&#xff0c;仅简单地实现了场地预约和器材租赁的…...

PyTorch 3.0静态图训练突然降速37%?紧急排查清单:CUDA Graph复用失效、TensorPipe通道泄漏、以及被隐藏的TORCH_COMPILE_DEBUG=1黄金日志开关

第一章&#xff1a;PyTorch 3.0静态图分布式训练性能骤降的典型现象与影响评估近期多个生产级训练集群反馈&#xff0c;在升级至尚未正式发布的 PyTorch 3.0 预览版&#xff08;基于 TorchDynamo AOTAutograd 的全静态图编译路径&#xff09;后&#xff0c;使用 torch.distrib…...

Python 闭包与装饰器

在 Python 学习中&#xff0c;闭包和装饰器是两个既关联又容易混淆的知识点&#xff0c;尤其是结合嵌套函数使用时&#xff0c;常常分不清执行逻辑。但其实只要抓住核心原理&#xff0c;再结合简单案例拆解&#xff0c;就能轻松掌握。 一、前置回顾&#xff1a;函数与局部变量的…...

ClassGraph安全封装绕过:Narcissus与JVM-Driver深度分析

ClassGraph安全封装绕过&#xff1a;Narcissus与JVM-Driver深度分析 【免费下载链接】classgraph An uber-fast parallelized Java classpath scanner and module scanner. 项目地址: https://gitcode.com/gh_mirrors/cl/classgraph ClassGraph作为一款超快速的并行化Ja…...

WarcraftHelper:让魔兽争霸III重获新生的兼容性优化工具

WarcraftHelper&#xff1a;让魔兽争霸III重获新生的兼容性优化工具 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper WarcraftHelper是一款免费开源的魔…...

PagerDuty与NodeJS集成:构建高效监控告警系统的实践指南

1. 为什么需要PagerDuty与NodeJS集成&#xff1f; 在当今的互联网服务架构中&#xff0c;系统的稳定性和可用性至关重要。想象一下&#xff0c;如果你的电商网站在凌晨3点突然宕机&#xff0c;而整个团队都在熟睡中&#xff0c;这会导致多少订单流失&#xff1f;这就是监控告警…...

[论文分享] ICLR 2026 Oral GEPA:反思性提示词演化可以超越强化学习

摘要 大型语言模型&#xff08;LLMs&#xff09;正越来越多地通过强化学习&#xff08;RL&#xff09;方法&#xff08;如群体相对策略优化 GRPO&#xff09;来适应下游任务&#xff0c;而这类方法通常需要数千次尝试&#xff08;rollouts&#xff09;才能学习新任务。我们认为…...

2026 靠谱网站建设公司推荐|中大型企业 / 上市公司建站避坑与优选指南

摘要 在 AI 与 GEO&#xff08;生成式引擎优化&#xff09;主导的 2026 年&#xff0c;企业官网早已不是简单的展示窗口&#xff0c;而是品牌信任、获客转化、合规披露、全球触达的核心数字资产。选择一家靠谱的网站建设公司&#xff0c;直接决定企业数字化成果与长期商业价值。…...

2025届学术党必备的降重复率网站横评

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 研究人工智能开题报告的工具&#xff0c;借助自然语言处理技术&#xff0c;靠着学术大数据分…...

MCP23009 I²C GPIO扩展芯片驱动设计与实战

1. MCP23009通用I/O扩展芯片驱动库深度解析与工程实践MCP23009是Microchip公司推出的8位IC总线可编程通用输入/输出&#xff08;GPIO&#xff09;扩展器&#xff0c;专为资源受限的嵌入式系统设计。该芯片通过标准IC接口&#xff08;支持标准模式100 kHz和快速模式400 kHz&…...