nodejs修复ipa处理过的png图片【vnsc5858威尼斯城官网

时间:2019-08-10 03:50来源:计算机教程
从设计图切图得到了12个小图标,是按钮的两种状态,然后我就寻思着把他们拼成一张sprite图片. 最近做项目遇到一个需求:解析apk和ipa包,然后把里面的icon上传到服务器。 之前用过gulp的

从设计图切图得到了12个小图标,是按钮的两种状态,然后我就寻思着把他们拼成一张sprite图片.

最近做项目遇到一个需求:解析apk和ipa包,然后把里面的icon上传到服务器。

之前用过gulp的sprite插件,但这次我不想搞的太隆重.拼图我知道有个很好用的命令行工具 GraphicsMagick 及配套的nodejs包gm

问题

首先说下我要拼的图片,我打算将正常状态作为第1行,激活状态作为第2行.这样可以少计算一些background-position.

解析上传过程比较简单,我使用JSZip对apk和ipa进行解压,然后把找到里面的icon上传到服务器。但是,当我在网页中使用图片时,问题出现了。对于apk中的icon,没有任何问题,但是对于ipa中解析出来的图片,在safari中可以正常显示,在其他任何浏览器去无法显示。

折腾过程比较痛苦,本来我打算看一下GraphicsMagick与gm的官方文档,结果好多生单词,最后还是放弃了.下面说答案吧:

原因

总的来说有两种方法,

Google后发现,是苹果对png图片进行了优化处理,具体看这篇文章(查看),在文章中我们可以了解到一些有用信息:

1.使用gm包的append adjoin方法

Apple uses PNGCursh open source library to crush png images inside iPA files。

这个方法有缺点,就是不能方便的排序成我想要的这种布局.用adjoin我实际上拼了3次图,才最终得到sprite.参考代码如下:

vnsc5858威尼斯城官网,解决方案

gm('nav1_1.png')
 .append('nav2_1.png','nav3_1.png','nav4_1.png','nav5_1.png','nav6_1.png', true)
 .adjoin().write('./result.png', function(err) {
   console.log(err);
 });
 gm('nav1_0.png')
 .append('nav2_0.png','nav3_0.png','nav4_0.png','nav5_0.png','nav6_0.png', true)
 .adjoin().write('./result1.png', function(err) {
   console.log(err);
 });

 gm('result1.png').append('result.png').adjoin()
   .write('nav-icons.png', (err, data) => {
     if(err) console.error(err);
     console.log(data);
   })

作为一个前端工程师,我希望用javascript解决这个问题。其实之前国外已经有人去解决了,NodeJS-PNGDefry就是可以,可惜这个太久没维护,已经跑不起来。

代码很初级.

找不到可用的,我只能自己动手丰衣足食,自己写一个。因此有了node-pngdefry。node-pngdefry的功能很明确,就是用Javascript来还原被苹果处理过的png图片。

2.使用GraphicsMagick自带的命令行工具

node-pngdefry用法很简单,支持命令行和常规的Node.js:

是直接使用GraphicsMagick的命令行(安装后,即可在命令行里使用gm命令),但这里要注意:powershell中使用gm一直报错,需要用cmd并cd到对应目录.win10自作聪明的用powershell默认代替cmd,结果连这种错误都没修复…

命令行用法

gm montage nav*_0.png nav*_1.png -tile 6x2 -geometry 0 0 rrr.png

install:

编辑:计算机教程 本文来源:nodejs修复ipa处理过的png图片【vnsc5858威尼斯城官网

关键词: