Li Ming

CentOS 使用 Linux Shell 一键生成 iOS 和 Android 图标

移动应用开发的时候,常常需要生成一大堆各种尺寸图标,iOS 和 Android 的要求各不相同,如果用 PhotoShop 一个个改尺寸并且另存,效率相当低下。换图标的时候,每次都是非常痛苦的。

作为一名专业程序员,肯定要想点办法来偷个懒了,我自己惯用的伎俩如下:

Asset Category Creator

Mac 下的一款软件,拖一张图标进去,就自动给你生成 Xcode 可以用的图标,见下图。

缺点:不能同时给 Android 生成;也不支持 Windows 系统;可以配置的东西比较少

Mobile Icon Resizer(强烈推荐)

官方网站:https://github.com/muzzley/mobile-icon-resizer

工作原理:使用 node.js 读取配置文件,然后调用 ImageMagick 来实现自动转化为想要的格式。

优点:可以自定义文件名、分辨率、屏幕密度;同时生成 iOS 和 Android;支持 Mac、Linux 和 Windows

安装

  • 安装 node.js
  • 安装 Mobile Icon Resizer:npm install mobile-icon-resizer -g
  • 安装 ImageMagick,CentOS 下执行:yum install -y ImageMagick ImageMagick-devel,其他系统请阅读 ImageMagick 官方文档

使用方法

方式一:node.js 里调用

var resize = require('mobile-icon-resizer');
var options = {
  // Your options here
};
resize(options, function (err) {
});

resize 函数的 options,有如下参数:

  • platformsToBuild: For which platforms should the icons be resized. Comma-separated list. Possible values [‘ios’, ‘android’]
  • originalIconFilename: The original image’s relative path and filename such as ‘../someIcon.png’. Default: ‘appicon_1024.png’.
  • iosFilenamePrefix: The prefix of the iOS image files. Default: ‘Icon’.
  • iosOutputFolder: The output folder for the iOS icons. Default: ‘.’.
  • androidOutputFolder: The output folder for the Android icons. Default: ‘.’.
  • androidOutputFilename: The output file name for the Android icons.
  • androidBaseSize: The base size, in pixels, to consider for the baseRatiocalculation. Default: 48.
  • config: Optional path to a .js or .json file that defines the thumbnail size configuration. Default: use the built-in config.js file.
  • convertBin: Windows machines only. See Windows Support below. Default convert.

方式二:Linux 命令行

直接使用命令 mobile-icon-resizer OPTIONS 来调用,例如:

mobile-icon-resizer -i appicon_1024.png --iosprefix="Icon" --iosof=output/ios --androidof=output/android --config=custom-sizes.js

可选参数如下:

  --input, -i        The prefix of the iOS image files.                                   [required]
  --iosprefix        The prefix of the iOS image files.                            [default: "Icon"]
  --iosof            The output folder for the iOS icons.                             [default: "."]
  --androidof        The output folder for the Android icons.                         [default: "."]
  --androidofn       The output file name for the Android icons.
  --androidbs        The base size, in pixels, for `baseRatio` sizing calculation.     [default: 48]
  --platforms        For which platforms should the icons be resized. Comma-separated list.
                     Possible values: ios, android                          [default: "ios,android"]

  --config           A file with custom thumbnail sizes configuration.
  --convertbin       Windows only.  See 'Windows Support' in ReadMe File.      [default:  "convert"]

  -v, --version      Print the script's version.
  -h, --help         Display this help text.

默认情况下,小图标的生成依赖一个 config.js 来配置,格式如下:

/* 配置文件 */
var config = {
    iOS: {
        "images": [
            {
                "size" : "20x20",
                "idiom" : "iphone",
                "filename" : "iphone-notification@2x.png",
                "scale" : "2x"
            }, {
                "size" : "20x20",
                "idiom" : "iphone",
                "filename" : "iphone-notification@3x.png",
                "scale" : "3x"
            }, {
                "size" : "29x29",
                "idiom" : "iphone",
                "filename" : "iphone-spotlight@2x.png",
                "scale" : "2x"
            }, {
                "size" : "29x29",
                "idiom" : "iphone",
                "filename" : "iphone-spotlight@3x.png",
                "scale" : "3x"
            }, {
                "size" : "40x40",
                "idiom" : "iphone",
                "filename" : "iphone-spotlight-7@2x.png",
                "scale" : "2x"
            }, {
                "size" : "40x40",
                "idiom" : "iphone",
                "filename" : "iphone-spotlight-7@3x.png",
                "scale" : "3x"
            }, {
                "size" : "60x60",
                "idiom" : "iphone",
                "filename" : "iphone-app@2x.png",
                "scale" : "2x"
            }, {
                "size" : "60x60",
                "idiom" : "iphone",
                "filename" : "iphone-app@3x.png",
                "scale" : "3x"
            }, {
                "size": "512x512",
                "idiom" : "iphone",
                "filename" : "512.png",
                "scale": "1x"
            }
        ]
    },
    android: {
        "images": [
            {
                "baseRatio": "1",
                "folder": "mipmap-mdpi"
            }, {
                "baseRatio": "1.5",
                "folder": "mipmap-hdpi"
            }, {
                "baseRatio": "2",
                "folder": "mipmap-xhdpi"
            }, {
                "baseRatio": "3",
                "folder": "mipmap-xxhdpi"
            }
        ]
    }
};

exports = module.exports = config; 

Windows 下的使用

就是要多配置一个参数 convertBin,这个是 convert.exe 的地址,其他没什么区别

不足之处

目前代码里只针对 iOS 和 Android 平台做了处理,其他的平台,还需要自己去扩展这个组件,以后有精力了再继续吧。

常见错误

  • convert 命令找不到,这是因为你没安装 ImageMagick

参考资料: