tauri开发中,使用node将png图片转成苹果的icns图标格式,解决tauri icon生成的mac图标过大问题

ops/2024/11/17 21:49:54/

在tauri开发中,我们使用tauri icon生成的图标在windows上是正常的,但是在mac上就显示过大,也可以看tauri的issue:[v2]When using the Tauri Icon to generate icons, it is always larger than other icons in Mac · tauri-apps/tauri · Discussion #10999 · GitHub

为了解决这个烦人的问题,有两种方式,一种是单独用ps给mac做一个图标,这种方式我也写过一个文章:创建一个和tauri图标一致的icon和苹果icns图标_tauri icon-CSDN博客。另外一种方式就是写一个js脚本,让自动执行生成一个icon图标。接下来就是展示的时间了:

1.在项目cli下创建一个creatIcon.cjs脚本文件

安装依赖:

pnpm install sharp png2icons -D

创建脚本:

const fs = require('fs')
const path = require('path')
const sharp = require('sharp')
const png2icons = require('png2icons')// 输入 PNG 文件路径
const inputPath = path.join(__dirname, './app.png')
// const inputPath = path.join(__dirname, './pakeplusicon.png')
// 临时输出带圆角和 padding 的 PNG 文件路径
const processedOutputPath = path.join(__dirname, './processed-image.png')
// 输出 ICNS 文件路径
const icnsOutputPath = path.join(__dirname, '../src-tauri/icons/icon.icns')// 给图片添加圆角并添加 padding
sharp(inputPath).resize({// 确保图片尺寸一致width: 1024,height: 1024,fit: 'contain',background: { r: 0, g: 0, b: 0, alpha: 0 },}).composite([// rx ry是圆角半径{input: Buffer.from(`<svg><rect x="0" y="0" width="1024" height="1024" rx="250" ry="250" /></svg>`),blend: 'dest-in',},])// top/bottom/left/right 是 padding.extend({top: 120,bottom: 120,left: 120,right: 120,background: { r: 0, g: 0, b: 0, alpha: 0 },}).toFile(processedOutputPath).then(() => {console.log('Image processing complete with rounded corners and padding.')// 读取处理后的 PNG 文件fs.readFile(processedOutputPath, (err, data) => {if (err) {console.error('Error reading processed PNG file:', err)return}// 转换 PNG 到 ICNS 格式const icnsBuffer = png2icons.createICNS(data, 1, 0)if (icnsBuffer) {fs.writeFile(icnsOutputPath, icnsBuffer, (writeErr) => {if (writeErr) {console.error('Error writing ICNS file:', writeErr)} else {console.log('ICNS file created successfully:',icnsOutputPath)// copy icns to /Users/song/Project/my/PakePlus/src-tauri/iconsfs.copyFile(icnsOutputPath,path.join(__dirname,'../src-tauri/icons/icon.icns'),(copyErr) => {if (copyErr) {console.error('Error copying ICNS file:',copyErr)} else {console.log('ICNS file copied successfully.')}})}})} else {console.error('Failed to convert PNG to ICNS.')}})}).catch((err) => {console.error('Error during image processing:', err)})

项目结构: 

将原始图片放在cli下的app.png,然后执行命令:

node ./cli/creatIcon.cjs

最后会将新生成的icon存到src-tauri/icons/icon.icns中:


http://www.ppmy.cn/ops/134541.html

相关文章

大数据应用开发——实时数据处理(一)

前言 大数据应用开发——实时数据采集 大数据应用开发——实时数据处理 Flink完成Kafka中的数据消费&#xff0c;将数据分发至Kafka的dwd层中 并在HBase中进行备份 大数据应用开发——数据可视化 hadoop&#xff0c;zookeeper&#xff0c;kafka&#xff0c;flink要开启 目…

SpringCloud Feign 报错 Request method ‘POST‘ not supported 的解决办法

Request method POST not supportedorg.springframework.web.HttpRequestMethodNotSupportedException: Request method POST not supported解决办法: 在远程调用fegin使用GET请求时 应该附加注解 RequestParam(“pgQuery”) 实体类或者单个参数同样适用 在controller接受参数…

处理继承自QWidget类的自定义类背景样式不生效问题【Qt】

处理继承自QWidget类的自定义类背景样式不生效问题 问题解答 问题 问题抛出&#xff1a;   当我们定义一个自定义类&#xff0c;并且继承自QWidget类&#xff1a;   为我们的自定义类进行构造&#xff1a;   这是运行后的表现&#xff0c;其中每一份测试人物&#xff…

富格林:正确应付阻挠虚假交易

富格林指出&#xff0c;投资者进入现货黄金市场的第一选择&#xff0c;应该是要学会正确阻挠虚假交易应对市场风险。市场千变万化&#xff0c;投资风险也随之而来&#xff0c;几乎每天都会有数据或消息公布&#xff0c;这也就使得该市场变得十分活跃。投资者要想正确应付阻挠虚…

批量重命名Excel文件并排序

批量重命名Excel文件并排序 python环境&#xff1a;3.5.2 import os import logging# 配置日志记录 logging.basicConfig(levellogging.INFO, format%(asctime)s - %(levelname)s - %(message)s)def rename_files_with_sequence(directory):# 检查文件夹是否存在if not os.pa…

【python】掌握 Flask:轻量级 Web 开发框架解析

【Python】掌握 Flask&#xff1a;轻量级 Web 开发框架解析 引言 Flask 是一个轻量级、灵活且广受欢迎的 Python Web 开发框架。它以其简单易用、模块化和强大的扩展功能而闻名&#xff0c;适合用于小型应用和快速原型设计。同时&#xff0c;Flask 提供了一系列工具和库&…

【小白可懂】微信小程序---课表渲染

结果展示&#xff1a;&#xff08;代码在最后&#xff09; WeChat_20241116174431 项目简介 在数字化校园建设的大背景下&#xff0c;为了更好地服务于在校师生&#xff0c;我们开发了一款基于微信小程序的课表管理系统。该系统采用了现代化的前端技术和优雅的设计风格&#x…

6. Keepalived配置Nginx自动重启,实现7x24提供服务

一. Keepalived配置Nginx自动重启,实现7x24提供服务 1.编写不停的检查nginx服务器状态,停止并重启,重启失败后则停止keepalived脚本 cd /etc/keepalived/ vim check_nginx_alive_or_not.sh #---内容如下:--------------- #!/bin/bash A=`ps -C nginx --no-header |wc -l