苹果应用图标自动创建

最近在做接入工作,需要不同应用接入不同的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()
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值