一种压缩QRCode矩阵以用于存储的方法

通常QRCode由服务器生成,以图片格式发送到客户端,由客户端直接展示,也可以由客户端使用javascript或其他内置的SDK直接生成。

0、需求

QRCode生成过程中往往是先生成矩阵,然后使用矩阵生成图片,矩阵就是由01组成的一维或二维数组。
例如,由ZXing生成的ByteMatrix就是一个由行列数据组成的二维数组。

//可以生成由01组成的一个矩阵字符串。
private string GetMatrixString(ByteMatrix matrix)
{return string.Join("", matrix.Array.Select(t => string.Join("", t)));
}

有时候,我们需要尽可能的减少网络传输,对QRCode进行缓存处理,或者减少QRCode矩阵生成的逻辑。
这时,我们完全可以将这个字符串发送给客户端,再由客户端生成图片,减少网络浏览传输或者方便客户端缓存QRCode。

下面方法可以对矩阵处理,生成QRCode图片。

function createQRCodeCanvas(matrix, size, padding) {size = size || 3;padding = padding === undefined ? 3 : padding;const width = Math.sqrt(matrix.length);const canvasWith = width * size + padding * 2;const canvas = document.createElement('canvas');canvas.width = canvasWith;canvas.height = canvasWith;const ctx = canvas.getContext('2d');ctx.fillStyle = "rgb(0,0,0)";for (let y = 0; y < width; y++) {for (let x = 0; x < width; x++) {const point = y * width + x;if (matrix[point] === 1) {ctx.fillRect(padding + x * size, padding + y * size, size, size);}}}return canvas.toDataURL();
}
1、矩阵压缩

由于矩阵完全由01组成,我们可以对矩阵进行处理,每8位作为一组,转换成一个字节。
往往矩阵的长度不会被8整除,所以我们在最后一位补1,标识矩阵结束,哪怕矩阵长度能被8整除,我们也补1。
下面代码生成压缩后的矩阵字节数组。

private byte[] GetMatrixBytes(ByteMatrix matrix)
{var qrData = matrix.Array;int idx = 7;int count = 0;byte[] result = new byte[(int)Math.Ceiling((decimal)(qrData.Length * qrData.Length + 1) / 8)];for (int i = 0; i < qrData.Length; i++){byte[] line = qrData[i];for (int j = 0; j < line.Length; j++){result[count++ >> 3] |= (byte)(line[j] << idx--);if (idx == -1) idx = 7;}}result[count >> 3] |= (byte)(1 << idx); //最后一位补1return result;
}

生成矩阵字节数组后,可以转换成base64发送到客户端,这样会大大减少传输的数据量。

2、矩阵还原

将上面的算法逆转即可。
例如,用csharp还原。

/// <summary>
/// 从字节数组还原矩阵字符串
/// </summary>
/// <param name="matrix"></param>
/// <returns></returns>
private byte[] GetMatrixBytes(byte[] matrix)
{byte[] bytes = new byte[matrix.Length * 8];int idx = 0;foreach (byte chr in matrix) for (int i = 7; i >= 0; i--) bytes[idx++] = (byte)((chr >> i) & 1);while (bytes[--idx] == 0) ;return bytes.Take(idx).ToArray();
}

用javascript还原

function getMatrix(raws) {const bytes = [];let idx = 0;for (let j = 0; j < raws.length; j++) {for (let i = 7; i >= 0; i--) bytes[idx++] = (raws[j] >> i) & 1;}while (bytes[--idx] === 0) ;return bytes.slice(0, idx);
}

矩阵还原出来后,就可以用文章最开始的方法将矩阵生成图片了。

3、总结

通过对矩阵的处理,进一步减少标识矩阵所用的字节数,从而减少网络传输的数据,并且更方便的缓存生成的QRCode。
客户端可以只缓存压缩后的矩阵,必要的时候还原并展示即可。
在这里插入图片描述

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

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

相关文章

CycleGAN

基于CycleGAN的妆容迁移是一种利用生成对抗网络&#xff08;GAN&#xff09;技术来实现的图像到图像的转换方法。它允许将一种妆容从一个图像迁移到另一个图像上&#xff0c;而不需要任何额外的标记或复杂的几何对齐。CycleGAN通过引入循环一致性损失&#xff08;cyclic consis…

[单master节点k8s部署]35.ingress 反向代理(二)

成功部署ingress controller [rootmaster 35ingress]# kubectl get pods -n kube-system NAME READY STATUS RESTARTS AGE calico-kube-controllers-7dc5458bc6-fpv96 1/1 Running 10 (4d16h ago) 9d calico-…

自动化测试selenium篇(二)

1. 操作测试对象 1.1 普通操作 测试代码如下所示&#xff1a; private static void Test03() throws InterruptedException {//创建一个驱动WebDriver webDriver new ChromeDriver();//打开百度首页webDriver.get("https://www.baidu.com");//找到百度搜索输入框…

通过AI技术克服自动化测试难点(下)

前面的文章里我们对可以应用到测试中的AI技术做了整体介绍&#xff0c;详细介绍了OpenCV技术、OCR技术和神经网络&#xff0c;本文我们继续为大家介绍卷积神经网络、数据集以及AI技术在其他方面和测试相关的创新。 卷积神经网络整体上的原理是这样的&#xff0c;首先在底层特征…

随机掉落的项目足迹:Vue3中vite.config.ts配置代理服务器解决跨域问题

跨域问题产生的原因:浏览器同源策略 后面的通俗解释小标题下的内容是便于大家理解同源策略和跨域问题。 而同源策略和跨域问题这两个小标题下的内容虽然比较专业不容易阅读,但是还是建议大家花时间理解并记忆,因为这是前端面试中的常考点。 同源策略 同源策略(Same-0rig…

TCP(Transmission Control Protocol,传输控制协议)整理

TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;是一种面向连接的、可靠的传输协议&#xff0c;它是OSI&#xff08;Open System Interconnection&#xff0c;开放式系统互联&#xff09;模型中的第四层协议&#xff0c;通常使用于网络中的…

【linux系统】进程

文章目录 进程和PCBlinux与进程的相关命令PS linux下的PCB进程标识符父子进程fork 进程状态磁盘睡眠 -- D暂停和跟踪暂停 -- T和t僵尸进程 -- Z孤儿进程 进程优先级 进程地址空间再谈fork进程地址空间分布虚拟地址和页表mm_struct 进程控制进程终止进程退出码信号 进程等待进程…

【翻译】在 Python 应用程序中使用Qt Designer的UI文件

原文地址&#xff1a;Using a Designer UI File in Your Qt for Python Application 直接上图&#xff0c;上代码 将UI文件转为Python 为了演示&#xff0c;我们使用 Qt Widgets 简单示例说明。 这个应用程序由一个源文件 easing.py、一个 UI 文件 form.UI、一个资源文件 ea…

Linux补丁命令patch

1、生成补丁&#xff0c;创建两个相同的目录结构&#xff0c;修改里面文件的内容 diff -uNr old_version new_version > update.patch 2、打补丁&#xff0c;应用到一个名为 target_version/ 的目录上&#xff0c;该目录与old_version/ 文件相同。 cd target_version patc…

考研笔记之操作系统(四) - 文件管理

文件管理 1. 简介1.1 前情回顾1.2 文件的属性1.3 文件内部数据的组织方式1.4 操作系统向上提供的文件功能1.5 文件应如何放在外存 2. 文件的逻辑结构2.1 无结构文件2.2 有结构文件2.2.1 顺序文件2.2.2 索引文件2.2.3 索引顺序文件2.2.4 多级索引顺序文件 3. 文件目录3.1 基本概…

【网络】用网线连接两台电脑实现远程桌面

目录 1. 准备工作1.1 硬件要求1.2 软件要求 2. 网络连接2.1 直接连接2.2 通过路由器连接 3. 配置IP地址3.1 设置IP地址3.2 检查连接 4. 启用远程桌面4.1 启用远程桌面4.2 添加用户4.3 防火墙设置 5. 远程连接5.1 使用远程桌面连接5.2 使用快捷方式 6. 常见问题解决7. 额外建议结…

1422. 分割字符串的最大得分【字符串】

文章目录 1422. 分割字符串的最大得分解题思路Go代码 1422. 分割字符串的最大得分 1422. 分割字符串的最大得分 给你一个由若干 0 和 1 组成的字符串 s &#xff0c;请你计算并返回将该字符串分割成两个 非空 子字符串&#xff08;即 左 子字符串和 右 子字符串&#xff09;所…

使用3080ti运行blip2的

使用3080ti运行blip2的案例 注意&#xff01;blip2很吃显存&#xff0c;需要大于80GB显存的卡。我最后安装的所有包的版本信息&#xff08;python 3.9 &#xff09;以供参考&#xff1a; 首先&#xff0c;我在运行blip2的demo的时候显存用了80G以上&#xff0c;所以大家卡的显存…

Vue 中引入 ECharts 的详细步骤与示例

在Vue项目中引入ECharts&#xff0c;可以让我们轻松地在前端页面中展示各种图表。ECharts 是一个基于 JavaScript 的开源可视化图表库&#xff0c;它提供了丰富的图表类型和强大的配置选项&#xff0c;使得在Vue项目中集成和使用变得非常方便。 一、准备工作 创建Vue项目&…

moectf-Web题解

1、弗拉格之地的入口 2、垫刀之路01: MoeCTF&#xff1f;启动&#xff01; 3、ez_http 4、ProveYourLove 5、弗拉格之地的挑战 6、ImageCloud前置 7、垫刀之路02: 普通的文件上传 8、垫刀之路03: 这是一个图床 9、垫刀之路05: 登陆网站 10、垫刀之路06: pop base mini …

【工具】VSCODE下载,配置初次设置

打开 settings.json 文件&#xff0c;包含了 Visual Studio Code (VSCode) 中的各种用户配置。 {"files.associations": {"*.vue": "vue","*.wpy": "vue","*.wxml": "html","*.wxss": "…

软件架构设计中的微内核架构是什么

Visual Studio Code 是一个广受欢迎的代码编辑器。它同样采用微内核架构&#xff0c;核心是一个轻量级的编辑器引擎&#xff0c;提供了基本的文本编辑、代码高亮、语法检查等功能。 通过安装不同的扩展插件&#xff0c;用户可以添加对各种编程语言的支持、调试功能、版本控制集…

React生命周期案例详解

React 组件的生命周期是指组件从创建、渲染、更新到卸载的整个过程。在 React 16 及之前的版本中&#xff0c;生命周期方法被分为几个不同的阶段&#xff1a;挂载&#xff08;Mounting&#xff09;、更新&#xff08;Updating&#xff09;、卸载&#xff08;Unmounting&#xf…

Java值传递、序列化详解

Java 值传递详解 说到参数&#xff0c;我们先来搞懂一下这两个概念 形参&实参 值传递&引用传递 形参&实参 方法的定义可能会用到 参数&#xff08;有参的方法&#xff09;&#xff0c;参数在程序语言中分为&#xff1a; 实参&#xff08;实际参数&#xff0c;…

QT实现Opencv图像处理

案例 基于QT的人脸识别 pro文件需要加以下代码 INCLUDEPATH E:/opencv/opencv3.4-qt-intall/install/include INCLUDEPATH E:/opencv/opencv3.4-qt-intall/install/include/opencv INCLUDEPATH E:/opencv/opencv3.4-qt-intall/install/include/opencv2 LIBS E:/opencv/o…