<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页面:

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

3、实例演示

相关推荐
Mintopia22 分钟前
Three.js粒子系统开发实战:从基础到性能优化
前端·javascript·three.js
Promise52022 分钟前
大屏"跑马灯" 长列表性能优化
前端·javascript
子玖23 分钟前
初始化项目前的准备
前端·javascript·vue.js
Mintopia23 分钟前
Three.js进阶实战:打造动态光影交互场景 ——结合环境光、聚光灯与相机控制的沉浸式体验
前端·javascript·three.js
Carlos_sam25 分钟前
OpenLayers:封装Overlay的方法
前端·javascript
MariaH26 分钟前
Sequelize模型初探
前端·后端
码视野27 分钟前
基于SpringBoot的河道水情大数据可视化分析平台设计与实现(源码+论文+部署讲解等)
spring boot·后端·物联网·信息可视化·论文·本科毕业论文·计算机专业毕业论文
Json_28 分钟前
使用uni-app框架 写电商商城前端h5静态网站模板项目-手机端-前端项目练习
前端·javascript·vue.js
海底火旺29 分钟前
JavaScript中的“先有鸡还是先有蛋”——变量提升的奥秘
前端·javascript
the_flash30 分钟前
JS拖动的原理
前端·javascript