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

前端二维码图片解析图片识别/网络图片解析成链接/图片网络链接转本地链接(Js/Vue/Jquery)

news 2025/12/16 2:42:13

注：需要用到canvas/jsqr/jquery！

1、远程图片链接本地化

页面：

<!-- 识别二维码用的 canvas-->
<canvas class="canvas" ref="canvas" style="display: none"></canvas>

1.创建图片

 get2: function (src) {let _this = this;return new Promise((resolve, reject) => {let image = new Image(), resultBlob = '';image.setAttribute('crossOrigin', 'anonymous');image.src = src;image.onload = () => {let random = Math.random();// 调用方法获取blob格式，方法写在下边resultBlob = _this.get3(image,random+".jpg");resolve(resultBlob)};image.onerror = () => {reject()}})
},

2. 绘画图片

get3(image, fileName) {let canvas = document.createElement("canvas");let ctx = canvas.getContext("2d");let initSize = image.src.lengthlet { width } = image, { height } = image;//等比缩放第二种 宽或高超过1280，等比缩放let rate = 1920 / width > 1;let tate = 1920 / height > 1;if(!rate){let product = 1920 / width;width =  Math.floor((width * product)*100)/100;height =  Math.floor((height * product)*100)/100;}else if(!tate){let product = 1920 / height;width =  Math.floor((width * product)*100)/100;height =  Math.floor((height * product)*100)/100;}canvas.width = widthcanvas.height = heightctx.fillStyle = 'rgba(255, 255, 255, 0)';//透明色ctx.fillRect(0, 0, width, height)ctx.drawImage(image, 0, 0, width, height)// 进行最小压缩0.1let compressData = canvas.toDataURL('image/jpg', 0.8)// 压缩后调用方法进行base64转Blob，方法写在下边let newFile = this.get4(compressData, fileName);return newFile
},

3.创建文件流

get4(dataurl, filename) {let arr = dataurl.split(",");let mime = arr[0].match(/:(.*?);/)[1];let bstr = atob(arr[1]);let n = bstr.length;let u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}//转换成file对象return new File([u8arr], filename, { type: mime });
},

4.上传到本地（此步骤根据实际需求选择）

async get1(src){//当需要循环时获取结果使用异步let _this=thislet res2 = await _this.get2(src);let formData = new FormData();let random = Math.random();formData.append("random", random);formData.append("files", res2);//后端接口let res = await _this.$http.postFile("/uploadImgForPc", formData);
},

2、解析二维码（网络图片示例）

1.准备工作

注：根据需要安装，如有本地文件也可引用！

安装canvas ：npm install canvas

安装报错：

> canvas@2.11.2 install /Users/.../WORK/work/.../node_modules/canvas > node-pre-gyp install --fallback-to-build --update-binary

解决报错：

npm install canvas@2.11.2  --canvas_binary_host_mirror=https://registry.npmmirror.com/-/binary/canvas

安装jsqr：npm install jsqr

安装jquery：npm install jquery

2.识别二维码（jquery--本地文件上传)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片二维码识别</title><script src="./jquery.min.js"></script><script src="./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>

3.识别二维码（vue网络二维码图片识别）

<!-- 识别二维码用的 canvas-->
<canvas class="canvas" ref="canvas" style="display: none"></canvas>
//e 为网络图片路径
async identifyImg(e) {let _this = this;return new Promise(async (resolve, reject) => {function get2(src) {return new Promise((res, rej) => {let image = new Image(),resultBlob = "";image.setAttribute("crossOrigin", "anonymous");image.src = src;image.onload = () => {let random = Math.random();resultBlob = get3(image, random + ".jpg");res(resultBlob);};image.onerror = () => {rej();};});}function get3(image, fileName) {let canvas = _this.$refs.canvas;let ctx = canvas.getContext("2d");let { width } = image,{ height } = image;//等比缩放第二种 宽或高超过1280，等比缩放let rate = 1920 / width > 1;let tate = 1920 / height > 1;if (!rate) {let product = 1920 / width;width = Math.floor(width * product * 100) / 100;height = Math.floor(height * product * 100) / 100;} else if (!tate) {let product = 1920 / height;width = Math.floor(width * product * 100) / 100;height = Math.floor(height * product * 100) / 100;}canvas.width = width;canvas.height = height;ctx.fillStyle = "rgba(255, 255, 255, 0)"; //透明色ctx.fillRect(0, 0, width, height);ctx.drawImage(image, 0, 0, width, height);// 进行最小压缩0.1let compressData = canvas.toDataURL("image/jpg", 0.8);// 压缩后调用方法进行base64转Blob，方法写在下边let newFile = get4(compressData, fileName);return newFile;}function get4(dataurl, filename) {let arr = dataurl.split(",");let mime = arr[0].match(/:(.*?);/)[1];let bstr = atob(arr[1]);let n = bstr.length;let u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}//转换成file对象return new File([u8arr], filename, { type: mime });}const file = await get2(e);const reader = new FileReader();reader.onload = () => {const img = new Image();img.onload = () => {const canvas = _this.$refs.canvas;const context = canvas.getContext("2d");context.drawImage(img, 0, 0, canvas.width, canvas.height);const imageData = context.getImageData(0,0,canvas.width,canvas.height);const code = jsQR(imageData.data,imageData.width,imageData.height);if (code) {// console.log("识别成功---", code);resolve(code.data);} else {// console.log("无法识别---", code);resolve(false);}};img.src = reader.result;};reader.readAsDataURL(file);});},

参考文章：

1.前端JS识别二维码内容_js 解析二维码-CSDN博客

2.js/vue实现远程图片链接本地化_js远程图片本地化_liuliu2021.12的博客-CSDN博客

前端二维码图片解析图片识别/网络图片解析成链接/图片网络链接转本地链接(Js/Vue/Jquery)

注：需要用到canvas/jsqr/jquery！ 1、远程图片链接本地化页面：  <canvas class"canvas" ref"canvas" style"display: none"></canvas> 1.创建图片 get2: fu…...

编程日记 2023/10/9 8:15:51

模板中的依赖类型使用 --- typename

依赖类型，顾名思义就是依赖于模板参数的类型，在使用这种类型时，必须使用 typename，否则编译器是无法知道是在使用类型，还是类的成员（因为类的静态成员的使用方法也是T::xxx，这跟某个类中的类型的…...

编程日记 2023/10/9 8:14:50

git 同时配置 gitee github

git 同时配置 gitee github 1、删除C:\Users\dell\.ssh目录。在任意目录右击——》Git Bash Here，打开Git Bash窗口，下方命令在Git Bash窗口输入。 2、添加git全局范围的用户名和邮箱 git config --global user.email "609612189qq.com" …...

编程日记 2023/10/9 8:13:48

2023.10.8 面试

面试工作1年的程序员看到生涩才入职场不久的面试者，为人也相对诚恳的模样，我对此是很欣赏的态度。因为完全看到了自己毕业1年时的场景。简历上写的事情，讨论起来，描述不清楚，为此感到遗憾，因我本人也会…...

编程日记 2023/10/9 8:12:46

【前端】js实现队列功能先进后出先进先出等

也可以定义一个定时器不断的去取队列执行任务用一个flag定义队列正在执行中, 如果没有执行则定时器不断的去调用队列,(因为会随时添加一个任务到队列中) 队列任务结束后自动取下一个队列也可以边加队列边取队列定义 function Queue() {//初始化队列（使用…...

编程日记 2023/10/9 8:11:46

07.数据持久化之文件操作

1. 文件操作计算机的文件，就是存储在某种长期储存设备上的一段数据长期存储设备包括：硬盘、U 盘、移动硬盘、光盘… 文本文件和二进制文件文本文件可以使用文本编辑软件查看本质上还是二进制文件例如：python 的源程序二进制文件…...

编程日记 2023/10/9 8:09:41

nginx开启https配置之后网页无法访问问题处理

背景说明最近新购服务器部署nginx之后按照之前的方式部署前端项目并配置https之后访问页面显示:无法访问.新的服务器ECS系统和之前相同,nginx安装方式也相同,nginx配置方式也是相同.但是访问还是显示无法访问.下面简单记录一下问题处理过程. 处理过程 1.https访问之后无法访问…...

编程日记 2023/10/9 8:08:39

文本嵌入层

目录 1、文本嵌入层的作用 2、代码演示 3、构建Embeddings类来实现文本嵌入层 1、文本嵌入层的作用无论是源文本嵌入层还是目标文本嵌入，都是为了将文本词汇中的数字表示转变为向量表示，希望在这样的高维空间中捕捉词汇之间的关系 2、代码演示 Emb…...

编程日记 2023/10/9 8:06:38

如何搭建自动化测试框架

关于测试框架的好处，比如快速回归提高测试效率，提高测试覆盖率等这里就不讨论了。这里主要讨论自动化框架包含哪些内容，以及如何去设计一个测试框架。 1. 什么是自动化测试框架？ 它是由一个或多个自动化测试基础模块、自动化测试…...

编程日记 2023/10/9 8:05:37

抄写Linux源码(Day17：你的键盘是什么时候生效的？)

回忆我们需要做的事情： 为了支持 shell 程序的执行，我们需要提供： 1.缺页中断(不理解为什么要这个东西，只是闪客说需要，后边再说) 2.硬盘驱动、文件系统 (shell程序一开始是存放在磁盘里的，所以需要这两个东…...

编程日记 2023/10/9 8:04:33

在原生html中使用less

引入less <link rel"stylesheet/less" href"./lessDemo.less" /><script src"./js/less.min.js"></script> less.min.js文件下载地址:https://github.com/less/less.js 注意：less文件在前，js文件在后…...

编程日记 2023/10/9 8:03:31

【Qt】顶层窗口和普通窗口区别以及用法

区别在Qt项目开发中，经常会用到窗体控件用于显示及数据操作和其他交互等。但，窗体分为顶层窗口（Top-level Window）和普通窗口（Regular Window）。他们之间是有区别的，包括在项目实际中的用法…...

编程日记 2023/10/9 8:01:26

qt开发从入门到实战2

以下是本人学习笔记原视频：最新QT从入门到实战完整版|传智教育 qt开发从入门到实战1 练习示例设计一个按钮，点击时弹出新窗口，再次点击时新窗口关闭 // exerciseQWidget* second_window new QWidget();QPushButton* btn3 new QPushBu…...

编程日记 2023/10/9 8:00:24

Android---字节码层面分析Class类文件

Java 提供了一种可以在所有平台上都能使用的一种中间代码---字节码文件(.class文件)。有了字节码，无论是那个平台只要安装了虚拟机都可以直接运行字节码文件。有了虚拟机，解除了 java 虚拟机与 java 代码之间的耦合。 Java 虚拟机当初被设计出来时就不单…...

编程日记 2023/10/9 7:58:22

【2023研电赛】东北赛区一等奖作品：基于FPGA的小型水下无线光通信端机设计

本文为2023年第十八届中国研究生电子设计竞赛东北赛区一等奖作品分享，参加极术社区的【有奖活动】分享2023研电赛作品扩大影响力，更有丰富电子礼品等你来领！，分享2023研电赛作品扩大影响力，更有丰富电子礼品等你来领&a…...

编程日记 2023/10/9 7:57:21

JWT授权为啥要在 Authorization标头里加个Bearer 呢

这是因为 W3C 的 HTTP 1.0 规范，Authorization 的格式是： Authorization: <type> <authorization-parameters> w3c规定，请求头Authorization用于验证用户身份。这就是告诉我们，token应该写在请求头Authorization中 …...

编程日记 2023/10/9 7:56:19

一篇理解TCP协议

一、TCP协议概念。 TCP（Transmission Control Protocol，传输控制协议）是一种面向连接的、可靠的传输层协议。它主要用于在计算机网络中，通过建立可靠的通信连接来进行数据传输。 TCP协议的特点如下： 可靠性&#xf…...

编程日记 2023/10/9 7:55:18

rk平台android12系统设置里面互联网选项中的以太网选项点击不了问题

rk平台android12系统中，系统设置中的互联网选项，当连接以太网以后，会显示以太网的选项，但是点击没作用，现在需要点击能够进入到以太网的设置界面，需要添加相关的点击事件。首先，在packages/apps/Settings/AndroidManifest.xml中的以太网设置配置添加一个action，用于打…...

编程日记 2023/10/9 7:53:16

ctrl+d和ctrl+c的区别

CtrlD和CtrlC都是常用的键盘快捷键，但它们的功能不同。 CtrlD 在不同的操作系统和应用程序中可以有不同的功能。在Unix/Linux系统的命令行终端中，CtrlD的作用是发送EOF（End of File）信号，表示输入结束。在Windows系统中…...

编程日记 2023/10/9 7:52:14

ChatGLM2-6B微调实践

ChatGLM2-6B微调实践环境准备安装部署1、安装 Anaconda2、安装CUDA3、安装PyTorch4、安装 ChatGLM2-6B 微调实践1、准备数据集2、安装python依赖3、微调并训练新模型4、微调后模型的推理与评估5、验证与使用微调后的模型微调过程中遇到的问题环境准备申请阿里云GPU服务器&…...

编程日记 2023/10/9 7:51:13

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手：借助大模型技术，开发能根据用户输入的主题、风格等要求，生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用，帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...

编程新知 2025/11/6 5:46:16

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2025/12/15 11:25:33

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/12/10 7:13:40

Java面试专项一-准备篇

一、企业简历筛选规则一般企业的简历筛选流程：首先由HR先筛选一部分简历后，在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历例如：Boss直聘（招聘方平台） 直接按照条件进行筛选例如&#xff1a…...

编程新知 2025/12/5 2:47:36

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...

编程新知 2025/11/3 0:44:41

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

目录一、👨‍🎓网站题目二、✍️网站描述三、📚网站介绍四、🌐网站效果五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目七、🎁更多干货一、👨‍&#x1f…...

编程新知 2025/12/10 0:09:41

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念，确保一个租户（在这个系统中可能是一个公司或一个独立的客户）的数据对其他租户是不可见的。在 RuoYi 框架（您当前项目所使用的基础框架）中，这通常是通过在数据表中增加一个…...

编程新知 2025/11/29 0:34:18

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于过滤器链（Filter Chain），核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤： 用户提交登录请求拦…...

编程新知 2025/12/13 12:28:47