<rust><tauri><GUI>基于tauri和rust,编写一个二维码生成器
前言
本文是基于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的图片显示程序(本地图片的加载、显示、保存)
3、动态演示
tauri二维码生成器演示