png导出iOS +安卓logo启动图

1、app开发中时常需要很多的logo以及启动图.
2、为提高工作效率, 花费一点时间制作了一个便捷的工具
3、支持iOS+安卓,支持安卓webP转换

截屏2025-07-22 16.39.51.png

一、技术实现
基于vue+js的技术路线
1、选择图片
2、生成所需要的不同尺寸
3、展示部分生成内容
4、点击按钮-打包下载

二、功能布局
1、Logo & 启动图自动打包工具--功能展示
2、选择文件--资源信息
3、打包下载--功能区

三、核心代码

const zip = new JSZip();
    const folder = zip.folder("production");

    const files = [
    { name: 'app/res/mipmap-xxxhdpi/ic_launcher_logo.png', file: this.resizedImages.thumb384 },
    { name: 'app/res/mipmap-xxhdpi/ic_launcher_logo.png', file: this.resizedImages.thumb288 },
    { name: 'app/res/mipmap-xhdpi/ic_launcher_logo.png', file: this.resizedImages.thumb192 },
    { name: 'app/res/mipmap-mdpi/ic_launcher_logo.png', file: this.resizedImages.thumb96 },
    { name: 'app/res/mipmap-hdpi/ic_launcher_logo.png', file: this.resizedImages.thumb144 },
    ];

    for (const file of files) {
      if (file.file) {
        const blob = await this.blobToFile(file.file);
        folder.file(file.name, blob);
      }
    }

四、目录结构

image.png