<rust><tauri><GUI>基于tauri和rust,编写一个二维码生成器

embedded/2025/3/17 6:56:43/
前言

本文是基于rusttauri,由于tauri是前、后端结合的GUI框架,既可以直接生成包含前端代码的文件,也可以在已有的前端项目上集成tauri框架,将前端页面化为桌面GUI

环境配置
  1. 系统:windows 10
  2. 平台:visual studio code
  3. 语言:rustjavascript
  4. 库:tauri2.0
概述

本文是基于taurirust,实现一个二维码生成器,并在实时显示。图片支持下载(基于web)。

1、创建前端项目

如何创建前端项目,及集成tauri,可以参考之前的博文:
1、<tauri><rust><GUI>基于rusttauri,在已有的前端框架上手动集成tauri示例
或者参考tauri的官网:
https://tauri.app/zh-cn/start/frontend/

本文不再赘述。

本文的目的,是基于taurirust,来生成二维码qrcode,其中,二维码的生成,使用rust来实现,我们需要安装一个rust库:

rust">cargo add qrcode

还需要安装一个图像处理库image:

rust">cargo add image

在Cargo.toml文件中如下:

qrcode = "0.14.1"
image = "0.25.5"

照例,我们先创建一个新的页面qrcode.html:

<div id="qrcodediv" class="qrcodediv"><div class="sec1"><label for="qrcodeinput">请输入二维码内容:</label><input id="qrcodeinput" type="text" placeholder="请输入内容" /></div><div class="sec2"><label for="qrcodesize">二维码尺寸:</label><select id="qrcodesize" name="qrcodesize"><option value="normal">Normal</option><option value="micro">Micro</option></select><select id="qrcodesizevalue" title="QR Code Size Value"></select></div><div class="sec3"><button id="geneqrcodebtn" type="button">生成二维码</button><img src="" id="qrcodeimg" alt="QR Code" /></div>
</div>

然后为其创建一个样式qrcode.css:

.app{display: flex;flex-direction: column;gap: 20px;
}
.qrcodediv {display: flex;flex-direction: column;gap: 20px;background-color: #ccc8c8;
}
.sec1{display: flex;flex-direction: row;margin-top: 10px;
}
.sec2 {display: flex;flex-direction: row;gap: 20px;
}
.sec3{display: flex;flex-direction: column;justify-content: center;align-items: center;
}
.sec3 img {width: 200px;height: 200px;margin-top: 20px;margin-bottom: 20px;
}
.sec3 button {width: 80px;height: 40px;border:1px solid #302f2f;border-radius: 5px;
}
.sec3 button:hover {background-color: #81b8e6;color: #fff;
}

运行后,GUI显示效果如下:
在这里插入图片描述
看上去比较简单,但是具备功能即可。

2、二维码生成

在前文说过,二维码生成,是利用rust来实现,我们先导入qrcode:

rust">use qrcode::QrCode;
extern crate image as eximg;

然后我们创建一个二维码生成函数,并标记为tauri命令:

rust">#[tauri::command]
fn generate_qrcode(text:String,version:String,value:i16) -> Result<(),String> {let ver1 = match version.as_str() {"normal" => qrcode::Version::Normal(value),"micro" => qrcode::Version::Micro(value),_ => panic!("Unknown version type"),};let ver1_modebit = ver1.mode_bits_count();println!("mode is {}",ver1_modebit);//let code = QrCode::new(text).unwrap();let code2 = match QrCode::with_version(text, ver1, qrcode::EcLevel::L) {Ok(code) => code,Err(e) => {eprintln!("error:{}", e);return Err(format!("生成二维码失败,\n错误信息:{}", e));}};let data = code2.render::<eximg::Luma<u8>>().build();let res = match data.save("../qrcode.png") {Ok(()) => Ok(()),Err(e) => {eprintln!("error:{}",e);return  Err(format!("保存二维码失败,\n错误信息:{}", e));}};res
}

根据输入的二维码内容、尺寸格式设置,来生成相应的二维码内容,然后通过image库保存为png图片(也可以存为svg格式)。
然后,我们如果要在前端窗口显示生成的二维码图片,需要获取图片路径,具体如何显示图片,可以参考之前的博文:
tauri><rust><GUI>基于rusttauri的图片显示程序(本地图片的加载、显示、保存)

3、动态演示

tauri二维码生成器演示


http://www.ppmy.cn/embedded/173275.html

相关文章

【机器学习-基础知识】统计和贝叶斯推断

1. 概率论基本概念回顾 1. 概率分布 定义: 概率分布(Probability Distribution)指的是随机变量所有可能取值及其对应概率的集合。它描述了一个随机变量可能取的所有值以及每个值被取到的概率。 对于离散型随机变量,使用概率质量函数来描述。对于连续型随机变量,使用概率…

HOT100系列——(普通数组+矩阵)

普通数组 1.合并区间 56. 合并区间https://leetcode.cn/problems/merge-intervals/ 先针对左区间进行排序&#xff0c;这样可以对右边进行考虑&#xff0c;如果intervals 中一个新的区间的左端点小于原ans的右端点&#xff0c;那么就能合并&#xff0c;右端点合并成原p【1】和…

基于SpringBoot3+Druid数据库连接池与外部PostgreSQL的Kubernetes Pod YAML全解析

说明 一个基于Spring Boot 3 Druid 外部PostgreSQL的Kubernetes Pod YAML详细解析&#xff0c;包含最佳实践和关键配置说明&#xff1a; YAML apiVersion: apps/v1 kind: Deployment metadata:name: springboot-applabels:app: springboot-app spec:replicas: 2selector:ma…

Spring AI 与 LangChain4j 选型对比分析

Spring AI 与 LangChain4j 选型对比分析 对比分析目前市场上两个主流的Java开源AI框架——Spring AI 和 LangChain4j&#xff0c;探讨它们的技术特点、适用场景以及未来发展的潜力。 一、易用性对比 Spring AI 优点 &#xff1a;对 Spring 开发者友好&#xff0c;通过自动配置…

Jdk7不同集合的扩容机制

Jdk7不同集合的扩容机制 集合类初始容量负载因子扩容公式扩容时机ArrayList10无新容量 旧容量 1.5元素数量超过容量时HashMap160.75新容量 旧容量 2元素数量超过 容量 负载因子 时HashSet160.75新容量 旧容量 2元素数量超过 容量 负载因子 时Vector10无新容量 旧容量…

科技工作者之家建设扬帆起航,为科技人才提供更多优质服务

大湾区经济网深圳讯&#xff0c;2025年3月11日&#xff0c;由深圳市高科技企业协同创新促进会主办的“科技工作者之家建设启动暨第五届新质生产力驱动成长型&制造业企业高质量发展专题咨询活动”在深圳凯宾斯基酒店隆重举行。本届高质量发展专题活动在往届成功经验的基础上…

项目-苍穹外卖(六)删除菜品+修改菜品

一、删除菜品 需求分析和设计&#xff1a; Controller&#xff1a; Service&#xff1a; 处理逻辑&#xff1a;将传递过来的ids字符串拆分成字符串数组 通过遍历确定字符串数组中每个元素&#xff08;id&#xff09;对应的菜品是否在售或者是否与其他套餐相关联 套餐部分需…

目标检测基础知识(面试应对)

&#x1f4cc; 面试核心考察点 1️⃣ 你的项目经历和技术应用 重点问法&#xff1a;你在某个项目中做了什么&#xff1f;用到了哪些技术&#xff1f;遇到什么问题&#xff1f;怎么解决的&#xff1f;应对方法&#xff1a;用 STAR 法则&#xff08;Situation 背景, Task 任务,…