关闭

苹果应用图标自动创建

标签: 应用苹果nodejs
142人阅读 评论(0) 收藏 举报
分类:
最近在做接入工作,需要不同应用接入不同的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
查看评论

Android Studio创建应用图标

使用Android Studio过程中记录
  • dong40407
  • dong40407
  • 2017-02-24 23:13
  • 108

应用内购:自动更新订阅教程

原文:In-App Purchases: Auto-Renewable Subscriptions Tutorial 作者:Chris Wagner 译者:kmyhy 苹果在 WWDC 2016 前推出了一个新特性:可自动更新订阅。没有比什么特性比它更能让你的钱包变厚了。通常的内购中,苹...
  • kmyhy
  • kmyhy
  • 2017-07-20 10:38
  • 2212

Ubuntu创建Firefox应用图标

1、下载最新版本:http://firefox.com.cn/download/   2、删除老版本:                 2.1若是系统...
  • u013884561
  • u013884561
  • 2015-03-17 16:06
  • 862

Ubuntu14.04 创建应用图标

为Eclipse创建图标
  • Lock_Love_
  • Lock_Love_
  • 2016-01-21 10:43
  • 217

苹果自动化之重签名

本文介绍如何通过重签名的办法,最终让Instruments可以启动目标app。
  • freejet2018
  • freejet2018
  • 2017-08-23 23:27
  • 130

关于launcher3 应用icon会自动添加到待机页面的问题

在android系统开发过程中。发现有些应用在安装后,在主菜单中第一次进入之后,此应用的icon会自动加载到待机页面上。 通过launcher3源码发现。 在AndroidManifest.xml中 <!-- Intent received used to install short...
  • wangjicong_215
  • wangjicong_215
  • 2017-04-14 15:44
  • 312

iPhone手机使用:手机应用更新之后,应用图标下面文字前边出现蓝色小圆点的去掉方法

前段时间打开手机的App Store,然后不小心点击了全部更新应用,然后手机里面全部的app应用都更新为最新版本,但是有几个应用在更新之后没有立即打开,然后就在应用图标下面的文字前面出现蓝色小圆点,如下图所示: 这个蓝色小圆点是说明这个软件是不久新安装的,或者是刚更新完之后还没点击打开过。...
  • CC1991_
  • CC1991_
  • 2017-08-24 16:45
  • 713

AS中创建各分辨率应用图标

File  -->  new --> Image Asset Asset Type改成Image   Path路径选择一个图片。
  • bbDseven
  • bbDseven
  • 2016-11-18 10:53
  • 127

iOS小技巧 - 利用苹果自带的方法对齐按钮内的图标与文字

以下代码中的frame的所有属性是经过了简单的get方法和set方法的重写,使其更方便使用!! 声明比例 /** 图标所占按钮的比例 */ const CGFloat kRatio = 0.4;在继承于UIButton的类文件中重写以下两个方法,返回CGRect来掌控比例,设置大小 ...
  • lincsdnnet
  • lincsdnnet
  • 2016-04-16 13:56
  • 568

iphone:保持表单输入的可见性——自动滚动视图

iPhone: Maintain visibility of form inputs – auto-scrolling views 当你开发图标或者任何有输入区域的界面,偶尔输入框再键盘弹出时会被挡住。这样用户体验不好,用户在输入时看不到他们所输入的东西。一个解决方案,是滑
  • ArthurChenJS
  • ArthurChenJS
  • 2011-08-16 08:27
  • 1868
    个人资料
    • 访问:1910次
    • 积分:68
    • 等级:
    • 排名:千里之外
    • 原创:5篇
    • 转载:0篇
    • 译文:0篇
    • 评论:2条
    文章分类
    文章存档
    最新评论