前端JS识别二维码内容

原文:https://www.cnblogs.com/houxianzhou/p/15030351.html

<!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>

在这里插入图片描述

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

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

相关文章

MATLAB实现网络相关的仿真(附上完整仿真源码)

MATLAB是一种功能强大的编程语言&#xff0c;可以用于网络相关的仿真。在本文中&#xff0c;我们将介绍如何使用MATLAB实现网络仿真&#xff0c;并附上简单的代码和完整仿真源码。 网络仿真是指通过计算机模拟网络环境&#xff0c;以评估网络性能、验证网络协议和测试网络应用…

Springboot中 AOP实现日志信息的记录到数据库

1、导入相关的依赖 <!--spring切面aop依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId></dependency> 注意&#xff1a;在application.properties文件里加这样一…

【前端设计】使用Verdi查看波形时鼠标遮住了parameter值怎么整

盆友&#xff0c;你们在使用Verdi的时候&#xff0c;有没有遇到过鼠标遮挡着了parameter数值的场景&#xff1f;就跟下面这个示意图一样&#xff1a; 最可恨的是这个参数值他会跟着你的鼠标走&#xff0c;你想把鼠标移开看看看这个例化值到底是多大吧&#xff0c;这个数他跟着你…

Python实现人脸识别功能

Python实现人脸识别功能 闲来没事&#xff0c;记录一下前几天学习的人脸识别小项目。 要想实现人脸识别&#xff0c;我们首先要搞明白&#xff0c;人脸识别主要分为哪些步骤&#xff1f;为了提高人脸识别的准确性&#xff0c;我们首先要把图像或视频中的人脸检测出来&#xf…

基于DNN深度学习网络的OFDM+QPSK信号检测算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ............................................................................. Transmitt…

XGBoost实例——皮马印第安人糖尿病预测和特征筛选

利用皮马印第安人糖尿病数据集来预测皮马印第安人的糖尿病&#xff0c;以下是数据集的信息&#xff1a; Pregnancies&#xff1a;怀孕次数Glucose&#xff1a;葡萄糖BloodPressure&#xff1a;血压 (mm Hg)SkinThickness&#xff1a;皮层厚度 (mm)Insulin&#xff1a;胰岛素 2…

区块链学习笔记

区块链技术与应用 数组 列表 二叉树 哈希函数 BTC中的密码学原理 cryptographic hash function collsion resistance(碰撞抵抗) 碰撞指的是找到两个不同的输入值&#xff0c;使得它们的哈希值相同。也就是说&#xff0c;如果存在任意两个输入x和y&#xff0c;满足x ≠ y…

【N32L40X】学习笔记03-gpio输出库

gpio输出 该函数库的目的就是在统一的地方配置&#xff0c;将配置的不同项放置在一个结构体内部使用一个枚举来定义一个的别名 led.c #include <stdio.h> #include "led/bsp_led.h"static led_t leds[LED_NUM]{{GPIOB,GPIO_PIN_2,RCC_APB2_PERIPH_GPIOB},{GP…

Android获取屏幕的宽高、密度等

转载他人的链接 Android 获取屏幕尺寸与密度获取屏幕密度&#xff08;方法1&#xff09; int screenWidth getWindowManager().getDefaultDisplay().getWidth(); // 屏幕宽&#xff08;像素&#xff0c;如&#xff1a;480px&#xff09; int screenHeight getWin…

ElasticSearch的面试题

ElasticSearch的面试题 ElasticSearch是开源的高扩展的分布式全文搜索引擎。 ElasticSearch基本操作 ES里的Index可以看做一个库&#xff0c;而Types想当于表&#xff0c;Documents则相当于表的行&#xff0c;这里的Types的概念已经被逐渐弱化&#xff0c;ElasticSearch6.X中&…

【ES】---ES的聚合(aggregations)

目录 一、前言1、聚合分类2、聚合的实现方式二、RestAPI--bucket聚合案例11、按照类型分bucket2、按照(String)时间分bucket三、RestAPI-- metric聚合案例11、metric指标统计四、RestAPI-- pipeline聚合案例1一、前言 聚合是对文档数据的统计、分析、计算。 注意:参与聚合的字…

SpringBoot-Mybatis整合+Restful风格 + (CRUD简单案例)

SpringBoot-Mybatis整合 基本步骤数据库设计数据库表设计pom.xml文件坐标SpringBoot配置配置SpringBoot 启动器类配置数据源(数据库)日志 驼峰映射 访问路径和端口 等引入前端页面搭建后端包结构业务逻辑(Restful风格)前端请求的四种方式(GET POST PUT DELETE)GET DELETEPO…

Java语言创建包含以上数据类型的MySQL表,并提供批量新增数据、批量修改数据、删除数据以及字段的DDL语句的详细代码示例

以下是使用Java语言创建包含以上数据类型的MySQL表&#xff0c;并提供批量新增数据、批量修改数据、删除数据以及字段的DDL语句的详细代码示例&#xff1a; import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; import java.sql.State…

YOLOX-PAI 论文学习

1. 解决了什么问题&#xff1f; 对 YOLOX 做加速&#xff0c;在单张 Tesla V100 上取得了 42.8 42.8 42.8mAP&#xff0c;推理速度为 1 毫秒。 2. 提出了什么方法&#xff1f; 2.1 主干网络 YOLOv6 和 PP-YOLOE 都将主干网络从 CSPNet 切换到了 RepVGG。RepVGG 在推理时&a…

MyBatis学习笔记之高级映射及延迟加载

文章目录 环境搭建&#xff0c;数据配置多对一的映射的思路逻辑级联属性映射association分布查询 一对多的映射的思路逻辑collection分布 环境搭建&#xff0c;数据配置 t_class表 t_stu表 多对一的映射的思路逻辑 多对一&#xff1a;多个学生对应一个班级 多的一方是st…

Anaconda常用命令

Anaconda常用命令 文章目录 Anaconda常用命令1. 前言2. 管理conda自身2.1 查看conda版本2.2 查看conda的环境配置2.3 设置镜像2.4 更新conda2.6 更新Anaconda整体2.7 查询某个命令的帮助 3. 管理环境3.1 创建虚拟环境3.2 创建虚拟环境的同时安装必要的包3.3 查看有哪些虚拟环境…

redis缓存穿透

缓存穿透是指在缓存中查询大量不存在的数据&#xff0c;导致无效请求直接落到后端数据库&#xff0c;从而造成数据库负载过高&#xff0c;甚至引起数据库超负荷的情况。缓存穿透通常发生在恶意攻击或非法请求的情况下&#xff0c;攻击者故意查询不存在的数据&#xff0c;导致大…

mac系统占用100多G怎么清除 mac内存系统占用了好多怎么清理

mac电脑运行速度足以傲视其他电脑系统&#xff0c;不易卡顿死机是苹果电脑的优势&#xff0c;但是其偏小的存储空间令人十分头痛。如果你的mac磁盘容量是仅有12GB&#xff0c;在使用一段时间之后&#xff0c;系统内存很有可能就要占用100多G&#xff0c;很快电脑会出现空间不够…

【Odoo16前端源码分析】接口web_search_read

接口名称: web_search_read 请求路径: /web/dataset/call_kw/project.project/web_search_read 内容主题: 请求参数kwargs中fields的来源分析 以list类型为例 1 先转成archInfo对象&#xff0c;其中有activeFileds属性 /* web/static/src/views/list/list_view.js */expor…

Android12之快速查找静态注册jni函数方法(一百六十一)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…