当前位置: 首页 > 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 …...

终极指南:如何使用Ohm构建JavaScript解释器(10个完整步骤)

终极指南&#xff1a;如何使用Ohm构建JavaScript解释器&#xff08;10个完整步骤&#xff09; 【免费下载链接】ohm A library and language for building parsers, interpreters, compilers, etc. 项目地址: https://gitcode.com/gh_mirrors/oh/ohm Ohm是一个强大的解析…...

SEO_10个提升网站排名的SEO技巧与实战方法

SEO:10个提升网站排名的SEO技巧与实战方法 在当今数字化时代&#xff0c;网站排名不仅关乎网站的曝光率&#xff0c;更影响到业务的发展。因此&#xff0c;提升网站排名&#xff08;SEO&#xff09;成为了每一个网站主的首要任务。有哪些SEO技巧能够帮助提升网站的排名呢&…...

Android开发者的USB摄像头避坑指南:从设备枚举到SurfaceView预览的完整流程

Android开发者实战&#xff1a;USB摄像头集成全流程与疑难解析 去年接手一个医疗设备项目时&#xff0c;我需要在Android平板上接入工业级USB摄像头。本以为三天能搞定&#xff0c;结果光是解决画面拉伸问题就耗了一周。这份踩坑经验总结&#xff0c;将带你系统掌握从设备枚举到…...

五层电梯MCGS7.7嵌入版与三菱PLC的联动编程实践

5五层电梯MCGS7.7嵌入版和三菱PLC联机程序调试电梯控制程序最头疼的莫过于通讯不稳定。上个月刚搞完一个五层电梯项目&#xff0c;MCGS7.7触摸屏和三菱FX3U的联机调试过程简直像坐过山车——楼层显示乱跳、按钮状态丢失这些幺蛾子接踵而来。今天咱就唠唠这个项目的实战经验。硬…...

5分钟搞定OpenClaw+Qwen3-14b_int4_awq:星图GPU镜像一键体验

5分钟搞定OpenClawQwen3-14b_int4_awq&#xff1a;星图GPU镜像一键体验 1. 为什么选择星图平台体验OpenClaw 上周我在本地尝试部署OpenClaw时&#xff0c;被各种环境依赖折腾得够呛。从Node.js版本冲突到Python包兼容性问题&#xff0c;光是解决报错就花了大半天时间。正当我…...

寒武纪高级系统软件工程师面试技术解析

1. 寒武纪高级系统软件工程师面试全解析 作为一名在芯片验证领域摸爬滚打多年的工程师&#xff0c;去年我经历了寒武纪高级系统软件工程师岗位的完整面试流程。这个岗位对系统底层和芯片验证的要求非常高&#xff0c;今天我就把两轮技术面的核心问题拆解给大家&#xff0c;并分…...

抖音批量下载工具终极指南:免费下载去水印视频的完整教程

抖音批量下载工具终极指南&#xff1a;免费下载去水印视频的完整教程 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback su…...

关联分析——从购物篮到推荐引擎的算法演进

1. 从购物篮到推荐引擎的关联分析演进 记得我第一次接触关联分析是在2015年&#xff0c;当时在一家零售企业做数据分析。老板扔给我一堆购物小票数据&#xff0c;让我找出"像啤酒和尿布那样的神奇组合"。那时候我才明白&#xff0c;原来数据里藏着这么多有趣的秘密。…...

让论文润色提速的秘密武器

对于每一位科研人员而言&#xff0c;将心血凝聚成论文初稿仅仅是万里长征的第一步。紧接着&#xff0c;一场更为煎熬的“拉锯战”往往在修改环节悄然打响。你是否也经历过这样的时刻&#xff1a;为了一个地道的表达&#xff0c;对着电脑屏幕逐字逐句地斟酌&#xff0c;耗费数小…...

别再让AI瞎猜了!5个实战案例教你写出让Vibe Coding一次成功的提示词

别再让AI瞎猜了&#xff01;5个实战案例教你写出让Vibe Coding一次成功的提示词 当你在Vibe Coding平台上输入一串提示词&#xff0c;满心期待地按下生成按钮&#xff0c;结果却得到一个与你想象中完全不同的产物——这种经历相信很多开发者都不陌生。为什么AI总是"误解&q…...