前言
本文是基于rust和tauri,由于tauri是前、后端结合的GUI框架,既可以直接生成包含前端代码的文件,也可以在已有的前端项目上集成tauri框架,将前端页面化为桌面GUI。
发文平台
稀土掘金
环境配置
- 系统:windows 10
- 平台:visual studio code
- 语言:rust、javascript
- 库:tauri2.0
概述
本文要实现一个svg图片转png的实例,基于tauri和rust实现。
1、创建前端项目
可以参考我之前的博文,本文不再赘述:
1、< tauri>< rust>< GUI>使用tauri实现一个简单的计算器程序
本文我们新建一个简单的html页面:
html
<div id="maincontainer">
<h1>APP</h1>
<div id="btnsdiv">
<button id="loadimgbtn" type="button">加载图片</button>
<button id="saveimgbtn" type="button">设置保存路径</button>
<button id="convertimgbtn" type="button">转换图片</button>
</div>
<div id="imgcontainer">
<div id="srcimgdiv">
<p>源图片路径:</p>
<p id="srcimgpathp"></p>
<img src="" alt="源图片">
</div>
<div id="dstimgdiv">
<p>目标路径:</p>
<p id="dstimgpathp"></p>
<img src="" alt="目标图片">
</div>
</div>
</div>
样式文件:
css
#maincontainer{
display: flex;
flex-direction: column;
gap: 20px;
}
#btnsdiv{
display: flex;
flex-direction: row;
gap: 10px;
}
#btnsdiv button{
width: 100px;
height: 40px;
background-color: #98bdee;
border-radius: 5px;
border: 1px dashed black; /* Changed border style to dashed */
}
#btnsdiv button:hover{
background-color: #14c6f3;
filter: drop-shadow(2px 2px 5px currentColor);
}
#btnsdiv button:active{
background-color: #b9bcbd;
filter: drop-shadow(2px 2px 5px #a4cdee);
}
#imgcontainer{
display: flex;
flex-direction: row;
gap: 30px;
width: 100%;
}
#srcimgdiv{
width: 45%;
height: auto;
background-color: #bdb9b9;
}
#dstimgdiv{
width: 45%;
height: auto;
background-color: #bdb9b9;
}
显示效果如下:
2、svg转png
为了实现对于图像的处理,我们在rust端安装两个库:
bash
cargo add image
bash
cargo add resvg
其中,image用于处理png等格式图形,resvg用于处理svg图片。 我们创建一个转换函数:
rust
///
/// svg转png
///
#[tauri::command]
fn svgtoimg(svgpath: &str,destimgpath: &str) ->String {
println!("{}",svgpath);
let mut opt=resvg::usvg::Options::default();
opt.resources_dir=std::fs::canonicalize(svgpath)
.ok()
.and_then(|p| p.parent().map(|p| p.to_path_buf()));
opt.fontdb_mut().load_system_fonts();
let svgdata=std::fs::read(svgpath).unwrap();
let tree=resvg::usvg::Tree::from_data(&svgdata,&opt).unwrap();
let pixmap_size = tree.size().to_int_size();
let mut pixmap = resvg::tiny_skia::Pixmap::new(pixmap_size.width(), pixmap_size.height()).unwrap();
resvg::render(&tree, resvg::tiny_skia::Transform::default(), &mut pixmap.as_mut());
//pixmap.save_png(destimgpath).unwrap();
let pp=pixmap.encode_png().unwrap();
let img=eximg::ImageReader::new(std::io::Cursor::new(pp))
.with_guessed_format().unwrap()
.decode().unwrap();
img.save(destimgpath).unwrap();
//Ok(())
destimgpath.to_string()
}
这里我们利用tauri提供的前后端调用指令,将rust的函数注册为前端可调用。 然后我们在JavaScript中调用此函数:
javascript
await invoke('svgtoimg',{svgpath:srcimgpath,destimgpath:dstimgpath})
.then((res)=>{
console.log(res);
setTimeout(() => {
const url = convertFileSrc(res);
setTimeout(() => {
const url_ts = getTimestamp(url);
console.log(url_ts);
dstimg.src = url_ts;
}, 200);
}, 100);
}).