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

＜rust＞＜tauri＞＜GUI＞基于tauri和rust，编写一个二维码生成器

article 2025/3/16 23:44:49

前言

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

环境配置

系统：windows 10
平台：visual studio code
语言：rust、javascript
库：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的图片显示程序（本地图片的加载、显示、保存）