当前位置: 首页 > article >正文

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

前言

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

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

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

1、创建前端项目

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

本文不再赘述。

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

cargo add qrcode

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

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:

use qrcode::QrCode;
extern crate image as eximg;

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

#[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>基于rust和tauri的图片显示程序(本地图片的加载、显示、保存)

3、动态演示

tauri二维码生成器演示


http://www.kler.cn/a/587597.html

相关文章:

  • 【鸿蒙开发】Hi3861学习笔记-Visual Studio Code安装(New)
  • 在线招聘小程序:AI简历筛选与精准职位推荐服务
  • 【生日蛋糕——DFS剪枝优化】
  • 网络安全系统集成
  • 微信小程序项目 tabBar 配置问题:“pages/mine/mine“ need in [“pages“]
  • 缓存之美:Guava Cache 相比于 Caffeine 差在哪里?
  • 游戏引擎学习第157天
  • neo4j中常用cql命令汇总(基础版)
  • Spark eventlog
  • [文献阅读] 可变形卷积DCN - Deformable Convolutional Networks
  • 服务性能防腐体系:基于自动化压测的熔断机制
  • 【软考-架构】3.4、数据库新技术-SQL语言
  • 基于牛优化( OX Optimizer,OX)算法的多个无人机协同路径规划(可以自定义无人机数量及起始点),MATLAB代码
  • 【eNSP实战】将路由器配置为DHCP服务器
  • 数据库原理10
  • 锂电池保护板测试仪:守护能源安全的科技卫士
  • 【STM32】USART串口收发HEX数据包收发文本数据包
  • 力扣 11.盛水最多的容器(双指针)
  • QT核心类:基础类、GUI类、多媒体与图表、网络与数据库
  • 游戏引擎学习第160天