苹果应用图标自动创建

最近在做接入工作，需要不同应用接入不同的icon，为了减少麻烦，决定使用Images.xcassets的方式来调用icon，脚本使用nodejs来生成对应尺寸的icon的图标。

首先建立需要导出的icon尺寸：

var ICONS_FORMATS = [
[29,29,"ipad_29x29_1x.png"],
[58,58,"ipad_29x29_2x.png"],
[40,40,"ipad_40x40_1x.png"],
[80,80,"ipad_40x40_2x.png"],
[50,50,"ipad_50x50_1x.png"],
[100,100,"ipad_50x50_2x.png"],
[72,72,"ipad_72x72_1x.png"],
[144,144,"ipad_72x72_2x.png"],
[76,76,"ipad_76x76_1x.png"],
[152,152,"ipad_76x76_2x.png"],
[29,29,"iphone_29x29_1x.png"],
[58,58,"iphone_29x29_2x.png"],
[87,87,"iphone_29x29_3x.png"],
[80,80,"iphone_40x40_2x.png"],
[120,120,"iphone_40x40_3x.png"],
[57,57,"iphone_57x57_1x.png"],
[114,114,"iphone_57x57_2x.png"],
[120,120,"iphone_60x60_2x.png"],
[180,180,"iphone_60x60_3x.png"]
]

首先建立需要导出启动底图尺寸：

var LAUNCHIMAGE_FORMATS = [
[10
b62b
24,748,"ipad_landscape_1024x748.png"],
[1024,768,"ipad_landscape_1024x768.png"],
[2048,1496,"ipad_landscape_2048x1496.png"],
[2048,1536,"ipad_landscape_2048x1536.png"],
[1536,2008,"ipad_portrait_1536x2008.png"],
[1536,2048,"ipad_portrait_1536x2048.png"],
[768,1004,"ipad_portrait_768x1004.png"],
[768,1024,"ipad_portrait_768x1024.png"],
[2208,1242,"iphone_landscape_2208x1242.png"],
[1242,2208,"iphone_portrait_1242x2208.png"],
[1536,2048,"iphone_portrait_1536x2048.png"],
[320,480,"iphone_portrait_320x480.png"],
[640,1136,"iphone_portrait_640x1136.png"],
[640,960,"iphone_portrait_640x960.png"],
[750,1334,"iphone_portrait_750x1334.png"]
]

脚本主要使用nodejs的images库，具体

// 创建所有目录
function mkdirs(dirpath, mode, callback) {

var fs = require('fs');
var path = require('path');

fs.exists(dirpath, function(exists) {
if(exists) {
callback(dirpath);
} else {
//尝试创建父目录，然后再创建当前目录
mkdirs(path.dirname(dirpath), mode, function(){
fs.mkdir(dirpath, mode, callback);
});
}
});
};

function create_icons(){

var path = require('path')
var images = require("images")

var src = 'appIcon.png'
var dst = 'Images.xcassets/AppIcon.appiconset'

var fileList = ICONS_FORMATS
fileList.forEach(function(data){

var width = data[0]
var height = data[1]
var dstPath = dst + '/' + data[2]
function onCovert(){

images(src)                     //加载图像文件
.size(width,height)      //等比缩放图像到400像素宽
.save(dstPath)
}
console.log(dstPath)
mkdirs(path.dirname(dstPath),0777,onCovert)
});
}

function create_launchimages(){

var path = require('path')
var images = require("images")

var dst = 'Images.xcassets/LaunchImage.launchimage'

var fileList = LAUNCHIMAGE_FORMATS
fileList.forEach(function(data){

var width = data[0]
var height = data[1]
var dstPath = dst + '/' + data[2]
function onCovert(){

images(width,height)                     //加载图像文件
.fill(0xff, 0xff, 0xff, 1.0)
.save(dstPath);
}
console.log(dstPath)
mkdirs(path.dirname(dstPath),0777,onCovert)
});
}

create_icons()
create_launchimages()

PS：

不知道为什么，我这边在生成图片的时候经常会出现路径目录未创建的异常，所以先用mkdirs来创建目标的目录文件夹，再生成文件，避免这种异常。

后续使用中发现nodejs的缩放png锯齿很明显，改为lwip库来替代images库进行图片处理，这样导出的图片比较平滑，基本能满足需求。

function create_icons(){

var path = require('path')

var src = 'appIcon.png'
var dst = 'Images.xcassets/AppIcon.appiconset'

rmdirs(dst)
var fileList = ICONS_FORMATS
fileList.forEach(function(data){

var width = data[0]
var height = data[1]
var dstPath = dst + '/' + data[2]
function onCovert(){

function onError(err){
if (err){
console.log(err)
}
}

require('lwip')
.open(src,function(err, image){

image.batch()
.resize(width,height)
.writeFile(dstPath,onError);

});
}
console.log(dstPath)
mkdirs(path.dirname(dstPath),0777,onCovert)
});
}

function create_launchimages(){

var path = require('path')

var dst = 'Images.xcassets/LaunchImage.launchimage'

rmdirs(dst)
var fileList = LAUNCHIMAGE_FORMATS
fileList.forEach(function(data){

var width = data[0]
var height = data[1]
var dstPath = dst + '/' + data[2]
function onCovert(){

function onError(err){
if (err){
console.log(err)
}
}

require('lwip')
.create(width,height,"white", function(err, image){
image.batch()
.writeFile(dstPath,onError);
});
}
console.log(dstPath)
mkdirs(path.dirname(dstPath),0777,onCovert)
});
}

create_icons()
create_launchimages()