vue3使用jsQR解析二维码

1.了解jsQR

jsQR是一个纯javascript脚本实现的二维码识别库,不仅可以在浏览器端使用,而且支持后端node.js环境。jsQR使用较为简单,有着不错的识别率。

2.效果图

请添加图片描述

3.二维码

在这里插入图片描述

4.下载jsqr

npm i -d jsqr

5.代码

<script setup>
import { ref } from 'vue'
import jsQR from "jsqr";const codeVal = ref('');function 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识别出来console.log('识别前的数据',imageData.data, imageData.width, imageData.height, 
);const decodedResult = jsQR(imageData.data, imageData.width, imageData.height, {inversionAttempts: 'dontInvert',});if (decodedResult) {//返回识别结果return decodedResult.data} else {window.alert('未识别到二维码!')return ''}
}function upload() {let input = document.querySelector('#input')const file = input.files[0]console.log('文件是什么',file);if (file) {const reader = new FileReader();reader.onload = (e) => {const image = new Image();image.src = e.target.result;image.onload = () => {let code = decodeQRCode(image);console.log(code)//识别结果 codeVal.value = code;};};reader.readAsDataURL(file);}
}</script><template><!-- <button @click="$refs.input.click()">识别</button> --><input type="file"  id="input" ref="input" @change="upload"><div>识别结果:{{codeVal}}</div><!-- <input type="file" style="display: none" id="input" @input="upload"> -->
</template>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/810519.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

迁移docker部署的GitLab

目录 1. 背景2. 参考3. 环境4. 过程4.1 查看原docker启动命令4.2 打包挂载目录传至新宿主机并创建对应目录4.3 保存镜像并传至新宿主机下4.4 新宿主机启动GitLab容器 5 故障5.1 容器不断重启5.2 权限拒绝5.3 容器内错误日志 6 重启容器服务正常7 总结 1. 背景 最近接到一个任务…

【Java】JDK1.8 HashMap源码,put源码详细讲解

&#x1f4dd;个人主页&#xff1a;哈__ 期待您的关注 在Java中&#xff0c;HashMap结构是被经常使用的&#xff0c;在面试当中也是经常会被问到的。这篇文章我给大家分享一下我对于HashMap结构源码的理解。 HashMap的存储与一般的数组不同&#xff0c;HashMap的每一个元素存…

libevent源码解析-定时机制,信号处理,流量控制

概述 libevent的event&#xff0c;event_callback&#xff0c;event_base除了可以用来支持套接字的自动和手动分发&#xff0c;也可用来支持定时机制&#xff0c;信号处理&#xff0e;这里&#xff0c;我们补充对定时机制&#xff0c;信号处理的分析&#xff0e; libevent中的…

c# wpf datagrid 简单试验

1.概要 datagrid 一个列表类的控件 2.代码 <Window x:Class"WpfApp2.Window3"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.mic…

MySOL之旅--------MySQL数据库基础( 3 )

本篇碎碎念:要相信啊,胜利就在前方,要是因为一点小事就停滞不前,可能你也不适合获取胜利,成功的路上会伴有泥石,但是走到最后,你会发现身上的泥泞皆是荣耀的勋章! 今日份励志文案: 凡是发生皆有利于我 目录 查询(select) 1.全列查询 2.指定列查询 3.查询字段为表达式 ​编…

嵌入式中常用的巧妙方法 - (汇总)

概述 做项目&#xff0c;掌握以下方法&#xff0c;可提高开发效率&#xff0c;把时间全部放在需求上。 1、快速获取结构体成员大小 #include <stdio.h> // 获取结构体成员大小 #define GET_MEMBER_SIZE(type, member) sizeof(((type*)0)->member)// 获取结构体成…

SNRO 编号范围对象管控,唯一ID

事务代码:SNRO 代码引用: DATA: MAXTID TYPE I,NEWNO TYPE CHAR8. CALL FUNCTION NUMBER_RANGE_ENQUEUE EXPORTING OBJECT ZQC57 EXCEPTIONS FOREIGN_LOCK 1 OBJECT_NOT_FOUND 2 SYSTEM_FAILURE 3 OTHERS …

Flutter学习13 - Widget

1、Flutter中常用 Widget 2、StatelessWidget 和 StateFulWidget Flutter 中的 widget 有很多&#xff0c;但主要分两种&#xff1a; StatelessWidget无状态的 widget如果一个 widget 是最终的或不可变的&#xff0c;那么它就是无状态的StatefulWidget有状态的 widget如果一个…

使用echarts控件,小程序分包处理上传失败

原因&#xff1a;在小程序中想要使用echarts控件&#xff0c;但是上传代码失败&#xff0c;错误码为主包超过2.5M&#xff0c;基于此&#xff0c;我们使用分包处理&#xff0c;并上传版本。 错误&#xff1a; 使用echarts&#xff1a;在小程序中引入echarts相关文件。 解决方式…

Arduino 项目笔记 |TH1621 LCD液晶显示屏驱动(SSOP-24封装)

LCD液晶屏资料 LCD液晶屏资料 重要参数&#xff1a; 工作电压&#xff1a; 3V可视角度&#xff1a;1201/4 &#xff0c;1/3 TH1621 驱动 HT1621 LCD控制驱动芯片介绍 VLCD 和 VCC 电压符合规格书&#xff0c;最好都取3.3V 。电压太高或太低都会出现段码液晶屏乱码的情况&am…

vue 原理【详解】MVVM、响应式、模板编译、虚拟节点 vDom、diff 算法

vue 的设计模式 —— MVVM M —— Model 模型&#xff0c;即数据V —— View 视图&#xff0c;即DOM渲染VM —— ViewModel 视图模型&#xff0c;用于实现Model和View的通信&#xff0c;即数据改变驱动视图渲染&#xff0c;监听视图事件修改数据 初次渲染 将模板编译为 render …

【Mybatis-Plus】Mybatis-Plus增删改查示例

示例一&#xff1a;delete 这个删除&#xff0c;是我们直接可以把这条记录给放进去&#xff0c;那么这条记录里面如果说有的属性为空的话&#xff0c;它是不会去管的&#xff0c;但是有些属性它不为空的话&#xff0c;那么它就会根据属性。作为一个equal的条件去做一个删除的一…

msvcr120.dll丢失的解决办法,msvcr120.dll文件丢失的相关介绍

今天小编在使用电脑的时候&#xff0c;突然弹出了一个关于msvcr120.dll文件丢失的问题&#xff01;当出现这种情况时&#xff0c;相信大家都会感到困惑吧&#xff1f;不过&#xff0c;别担心&#xff01;下面就来和大家分享一下解决msvcr120.dll文件丢失问题的几种方法&#xf…

城市内涝与海绵城市规划设计中的水文水动力模拟

原文链接&#xff1a;城市内涝与海绵城市规划设计中的水文水动力模拟https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247601198&idx5&sn35b9e5e3961ea2f190f9742236a7217f&chksmfa820dc9cdf584df97633f64d19bdc3e5f7d1a5a85000c8f040e1953c51b9b39c87b5…

Docker 集成 redis,并在nacos进行配置时需要注意点

安装redis镜像 docker pull redis:6.0.6redis配置文件 创建相关配置文件 mkdir /apps/redis cd /apps/redis touch redis.conf vim redis.confredis.conf内容&#xff1a; #开启保护 protected-mode yes #开启远程连接 bind 0.0.0.0 #自定义密码 port 6379 timeout 0 # 900s内…

Go语言中channel和互斥锁的应用场景

面对一个并发问题,我们的解决方案是使用channel还是互斥锁来实现并不总是很清晰。因为Go提倡使用通信来共享内存,所以一个常见的错误就是总是强制使用channel,不管实际情况如何。但是我们应该把这两种选择作为互补手段。 首先,简单回顾一下Go语言中的channel:channel是一种交…

DL00295-基于AirSim仿真环境的无人机深度强化学习算法路径规划完整实现含详细说明文档

-创建了一个开放的AI Gym环境&#xff0c;包括多旋翼和固定翼无人机的运动学模型。 -提供了一些UE4环境来训练和测试深度强化学习DRL导航策略。 -基于AirSim和SB3。 完整代码链接见文末。 DL00295-基于AirSim仿真环境的无人机深度强化学习算法路径规划完整实现含详细说明文档

Linux-docker安装数据库redis

1.拉取redis镜像 docker pull redis # 下载最新的redis版本 docker pull redis:版本号 # 下载指定的redis版本ps&#xff1a;我这是已经下载最新版本的redis 2.查看redis镜像 docker images3.创建挂在路径并授权 mkdir -p /usr/local/redis/data mkdir -p /usr/local…

AI大模型基石:文字与数字的起源与演变

AI大模型基石&#xff1a;文字与数字的起源与演变 1、文字 1.1、起源 我们的祖先在还没有发明文字和语言之前就已经开始使用“咿咿呀呀”的声音来传播信息了&#xff0c;比如在野外活动遇到危险&#xff0c;然后发出“咿咿呀呀”的声音来提醒同伴小心&#xff0c;同伴在接收到…

向大众日报投稿需要准备哪些材料?

向大众日报投稿通常需要准备以下材料&#xff1a; 稿件正文&#xff1a;这是投稿的核心部分&#xff0c;确保内容符合大众日报的主题和风格。作者信息&#xff1a;包括姓名、联系方式&#xff08;如电话、邮箱等&#xff09;。个人简介&#xff1a;简要介绍自己的背景和相关经…