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

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

news 2025/9/11 9:57:16

注：需要用到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

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/6/15 19:07:20

React Native 导航系统实战（React Navigation）

导航系统实战（React Navigation） React Navigation 是 React Native 应用中最常用的导航库之一，它提供了多种导航模式，如堆栈导航（Stack Navigator）、标签导航（Tab Navigator）和抽屉…...

编程新知 2025/8/31 2:19:21

PHP和Node.js哪个更爽?

先说结论，rust完胜。 php：laravel，swoole，webman，最开始在苏宁的时候写了几年php，当时觉得php真的是世界上最好的语言，因为当初活在舒适圈里，不愿意跳出来，就好比当初活在…...

编程新知 2025/8/2 12:29:50

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用侧边栏 vscode还能连接ssh？ debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2025/9/9 23:12:32

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代，情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现，消费者对内容的“有感”程度，正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2025/8/26 10:14:34

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户，但你不希望用 root 权限运行 ns-3（这是对的，ns3 工具会拒绝 root），你可以按以下方法创建一个非 root 用户账号并切换到它运行 ns-3。一次性解决方案：创建非 roo…...

编程新知 2025/8/9 9:19:48

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题：CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者：Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2025/8/26 23:41:49

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户或 sudo 权限执行！ sudo su - 1. CentOS 系统： yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/8/24 22:00:49