最近在做接入工作,需要不同应用接入不同的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 = [
[1024,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()