最近做專案遇到一個需求:解析apk和ipa包,然後把裡面的icon上傳到伺服器。
問題
解析上傳過程比較簡單,我使用JSZip對apk和ipa進行解壓縮,然後把找到裡面的icon上傳到伺服器。但是,當我在網頁中使用圖片時,問題出現了。對於apk中的icon,沒有任何問題,但是對於ipa中解析出來的圖片,在safari中可以正常顯示,在其他任何瀏覽器去無法顯示。
原因
Google後發現,是蘋果對png圖片進行了優化處理,具體看這篇文章(查看),在文章中我們可以了解到一些有用資訊:
Apple uses PNGCursh open source library to crush png images inside iPA files。
解決方案
身為一個前端工程師,我希望用javascript解決這個問題。其實之前國外已經有人去解決了,NodeJS-PNGDefry就是可以,可惜這個太久沒維護,已經跑不起來。
找不到可用的,我只能自己動手豐衣足食,自己寫一個。因此有了node-pngdefry。 node-pngdefry的功能很明確,就是用Javascript來還原被蘋果處理過的png圖片。
node-pngdefry用法很簡單,支援命令列和常規的Node.js:
命令列用法
install:
$ npm install -g pngdefry
then run:
$ pngdefry -i icon.png -o icon.new.png
在Node.js中使用
$ npm install pngdefry --save-dev
var pngdefry = require('pngdefry'); var path = require('path'); var input = path.join(__dirname, 'icon.png'); var output = path.join(__dirname, 'icon.new.png'); pngdefry(input, output, function(err) { if (err) { return; } console.log('success'); });
Test
$ npm test
項目地址