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

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

news 2025/12/15 14:20:36

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

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 （结构体大小计算及位段详解请看：自定义类型：结构体进阶-CSDN博客） 1.在32位系统环境，编译选项为4字节对齐，那么sizeof(A)和sizeof(B)是多少？ #pragma pack(4)st…...

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

STM32标准库-DMA直接存储器存取

文章目录一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA（Direct Memory Access）直接存储器存取 DMA可以提供外设…...

编程新知 2025/12/9 1:29:51

linux 错误码总结

1，错误码的概念与作用在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

C# 求圆面积的程序（Program to find area of a circle）

给定半径r，求圆的面积。圆的面积应精确到小数点后5位。例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。输…...

编程新知 2025/12/7 16:18:19

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中，我们渴望一个能激发创想、愉悦感官的工作与生活伙伴，它不仅是冰冷的科技工具，更能触动我们内心深处的细腻情感。正是在这样的期许下，华硕a豆14 Air香氛版翩然而至，它以一种前所未有的方式&#x…...

编程新知 2025/12/10 5:35:21

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍： img 属性指定分区存放的 image 名称，指定的 image 名称必须是当前工程生成的 binary 。如果 binary 有多个文件，则以 proj_name:binary_name 格式指定文件名， proj_name 为工程名&…...

编程新知 2025/12/15 14:15:30