摘要：使用Tauri + Rust + Wasm来开发本地图片压缩应用程序，支持PNG，JPG，GIF格式，并告别过多的图片文件的麻烦
标签：Tauri，Rust，Wasm，WebAssembly，图片压缩
作者：大熊
作为前端开发人员，您每次给出的UI都足够大，以至于您想抬起枪管以行驶这条路。在您打算饲养枪管之前，请留下来。
我关心它称为图像很小。
看看压缩率。PNG和JPG格式基本上可以达到约80％，而GIF可以达到约11％。
好吗？还不错吗？
TinyPNG是作为前端开发人员作为前端开发人员的熟悉的。它支持PNG，JPG，WebP格式图像压缩，压缩率也非常好。使用它的朋友一定不再是几个。
这是PNG，2个JPG和2张GIF图片的4个比较数据比较数据：
对于PNG格式的图片，图像的压缩速率基本上可以达到TINYPNG的水平。
对于JPG格式的图片，图像小的压缩质量在测试后将其调整为小于80％，这可以超过tinypng。
对不起，以GIF格式的图片，TinyPNG不支持它。
对不起，图片及以上的图片不支持它。
综上所述，我们的图像很小，它是完全免费的，它依赖于互联网，而不是依赖服务器。
借助LibimageQuant，libpng，libjpeg，gifsicle，C -Language库的神经压缩，使用EMSCRIPEN SDK（EMSDK）将C代码编译到WASM文件中，以供浏览器拨打CODE。
此处未显示特定的压缩代码。该项目有一个开源计划，每个人都可以自然看到它。
Tauri + Rust + Vue3.0 + Vite
如果您不熟悉陶里（Tauri），则可以阅读前面发表的文章：
掘金链接？：扔掉电子，拥抱基于锈的开发的陶里
从API的引入中，当前窗口实例是通过该方法获得的。实例上有一种方法。参数可以控制窗口或取消顶部。
至于为什么您需要在应用程序中添加一个窗口？在这里挖一个坑，稍后将填充。
main.rs
介绍，构建一个新的菜单项，调用添加本机项目的方法，然后创建一个新菜单。该方法将添加到菜单中，最后将菜单注册到应用程序。
浏览器用于监视拖动并在事件中获取文件信息。
事件返回的参数是对象。对象上有一个字段。该字段下有一个存储我们需要的字段，我们将被我们拖动。获得后，将其传递到遍历压缩图像文件的方法。
提示：您需要禁用Tauri提供的文件拖动事件，代码如下
陶里（Tauri.conf.json）
为了促进公司的其他项目以访问图片压缩功能，我用私有的NPM插件将此核心代码封装，以促进每个项目的访问。之后，我可以考虑打开源以在所有朋友的NPM上发布公共插件-can use.pan.let。
通过将C代码编译为文件，将生成文件和胶水代码。此JS胶代码将处理WASM文件。我们只需要使用导出的对象，其中包含我们需要使用的方法。
图像方法是参数::
输出是：
Tauri API简介：，
使用该方法打开文件来保存炸弹框，以便用户选择保存路径。此方法具有一个参数来设置默认保存路径。方法返回值是通往终点的文件路径。我们选择系统的默认下载路径作为默认存储路径，我们可以通过该方法获得系统的默认下载路径。
重要的是要注意，由于“文件保存”对话框提供的文件名是，如果用户未修改或手动删除，则路径返回将包括第一个级别目录，我们可以直接在代码级别剪切。
该方法收到的参数是一个，其中包含当前图片文件的基本信息和我们的一些自定义信息，如下所示：
通过API读取图片文件的数据，
文件通过Tauri提供的API写入局部区域。ACCECT对象参数，包括字段，文件的数据，要保留的路径。
为了方便用户，我们将文件名缝合到代码中的路径上，因此用户无需在“保存文件对话框”中手动填写文件名，只需直接保存即可。
我们使用插头将文件放入zip软件包中。
首先，我们用来创建一个新示例，遍历压缩文件列表，调用要添加文件的方法，该方法接收两个参数，一个是文件名，另一个是文件的内容数据。
然后通过API调用文件以保存项目符号，获取需要保存的路径，调用该方法生成ZIP软件包的数据，然后通过API将文件写入局部区域。
提示：ZIP软件包的命名方法选择获取年度和每月的信息以命名。
可以说这是最大的坑。我们为什么要下去？
在项目构建开始时，我期待最新版本的Tauri，但是当将功能开发开发到文件系统的API时，我遇到了一个严重的问题：Tauri的FS相关API无法在任何下方读取文件路径。什么？您如何开心玩？显然这很有用，是因为版本问题吗？我与Tauri社区沟通了怀疑。最终答案是：在安全考虑方面，与FS相关的API相关的API在新版本中，只能访问Tauri提供的系统路径下的文件。
这绝对是不合理的。对于我们来说，不可能让用户压缩图片，并且必须将图片提前放在指定的目录中以访问它。
因此，他们将这个问题喂给了陶里社区。他们说，随后的版本计划将用户的选择添加到白名单中，以绕过此限制。
得到答案后，解决方案是返回陶里版本，因此您只能返回旧版本。特定版本的信息如下：
package.json
货物
如果还有其他朋友在使用Tauri时会遇到文件访问限制，则可以参考上述版本。
总体上有三种方式，让我们一一看看它们。
1.输入上传方法，它被陶里（Tauri）禁止，并且完全无法打开文件选择对话框。
2. Tauri提供的全球拖动事件
通过聆听Tauri提供的事件，您可以获取事件的对象，该事件将返回文件路径。该右边只返回文件路径列表。我们还需要遍历文件路径列表以使用相关的API，然后读取与每个路径相对应的文件。此过程很长，时间耗时，经验和经验差。
3.垂坠事件
通过监视事件，可以直接获得上传的对象，其中包含文件的特定信息，这是方便且快速的，因此该解决方案也是本文采用的解决方案。
填充坑：
为什么要在顶部功能中添加一个窗口？
因为Image Tiny的图片上传方法是拖动和上传。如果没有设置顶部功能的窗口，则很容易被其他应用程序阻止，这肯定会降低体验。在顶部功能的情况下，用户无需担心阻止。
超级链：github
？：https：//github.com/mxismean/image-tiny-package.git
.DMG格式文件用于Mac安装程序包
。Windows安装程序包的MSI格式文件
欢迎您下载和安装。如果您易于使用，请不要忘记喜欢这篇文章。如果您可以转发它，那就更好了，因此更多的朋友可以看到它。
整个应用程序花费了将近一周的开发完成。在此期间，有无数的坑，找到问题解决方案一直在滚动。但是，当开发完成后，心脏仍然非常高兴。我还希望可以使用Tauri开发更多的小工具，以带来一些方便?
原始：https：//juejin.cn/post/7100105373767434247