＜tauri＞＜rust＞＜GUI＞基于rust和tauri，实现一个svg转png的工具

前言

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

发文平台

稀土掘金

环境配置

1. 系统：windows 10
2. 平台：visual studio code
3. 语言：rust、javascript
4. 库：tauri2.0

概述

本文要实现一个svg图片转png的实例，基于tauri和rust实现。

1、创建前端项目

可以参考我之前的博文，本文不再赘述：

1、< tauri>< rust>< GUI>使用tauri实现一个简单的计算器程序

本文我们新建一个简单的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>

样式文件：

#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端安装两个库：

cargo add image

cargo add resvg

其中，image用于处理png等格式图形，resvg用于处理svg图片。 我们创建一个转换函数：

///
/// 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中调用此函数：

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);
    }).

3、实例演示