＜tauri＞＜rust＞＜GUI＞基于rust和tauri的图片显示程序（本地图片的加载、显示、保存）

前言

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

环境配置

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

概述

本文基于tauri框架，创建一个图片显示器程序。要实现的功能是，如何从本地路径加载、显示、保存图片。

前提准备

由于本文涉及到文件选择，但我们不使用html的input元素，而是使用tauri的插件，所以我们需要添加一个文件对话框的库：

npm run tauri add dialog

dialog的用法如下（tauri官方手册）：

比如我们在本文想要实现文件选择，那么就需要打开一个文件对话框，其官方代码如下：

open对话框示例代码

import {
    open } from '@tauri-apps/plugin-dialog';

// Open a dialog
const file = await open({
   
  multiple: false,
  directory: false,
});
console.log(file);
// Prints file path and name to the console

事实上dialog插件可以在javascript和rust中使用，但本文只选择在将javascript中使用，不涉及rust中的使用，详细可以参考tauri官网：
https://v2.tauri.app/zh-cn/plugin/dialog/

1、创建前端项目

此处不再赘述，可以参看我的前一篇博文：
＜tauri＞＜rust＞＜GUI＞基于rust和tauri，在已有的前端框架上手动集成tauri示例
本文将在之前的项目的基础上进行修改。我们将修改之前的计算器布局，添加一个图片选择与显示的前端页面，可以命名为imgshow.html。
imgshow.html

<div class="imgshow">
    <div id="btnzone">
        <button id="openfilebtn">加载图片button>
        <button id="savefilebtn">保存图片button>
    div>
    <p id="srcfilepathp">源图片路径：