资讯专栏INFORMATION COLUMN

用JavaScript修复ipa处理过的的png图片

TZLLOG / 602人阅读

摘要:但是,当我在网页中使用图片时,问题出现了。原因后发现,是苹果对图片进行了优化处理,具体看这篇文章查看,在文章中我们可以了解到一些有用信息。的功能很明确,就是用来还原被苹果处理过的图片。

最近做项目遇到一个需求:解析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
项目地址

node-pngdefry

感谢

最后感谢上面提到的文章的作者Jongware。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78660.html

相关文章

  • JavaScript修复ipa处理的的png图片

    摘要:但是,当我在网页中使用图片时,问题出现了。原因后发现,是苹果对图片进行了优化处理,具体看这篇文章查看,在文章中我们可以了解到一些有用信息。的功能很明确,就是用来还原被苹果处理过的图片。 最近做项目遇到一个需求:解析apk和ipa包,然后把里面的icon上传到服务器。 问题 解析上传过程比较简单,我使用JSZip对apk和ipa进行解压,然后把找到里面的icon上传到服务器。但是,当我在...

    lookSomeone 评论0 收藏0
  • 七牛 js JDK使 - 上传APP

    摘要:背景介绍使用将包括安卓和上传到七牛上传所以不考虑数据处理使用后台得到七牛上传基于下面不详述如何使用参见七牛上传的简单案例也不详述,参见官网事例很清楚了。指定上传的目标资源空间和资源键的长度最大为字节。,表示只允许用户上传指定的文件。 背景介绍 使用JS将APP(包括安卓和IOS)上传到七牛 (上传APP所以不考虑数据处理) uptoken使用JAVA后台得到 七牛上传基于pluplo...

    elva 评论0 收藏0
  • WEB/H5性能优化总结

    摘要:如下图所示一重绘与回流前端性能优化最关键的就是减少页面的重绘与回流。很明显就是少了一步,这是因为把会触发回流的属性用替代,这样就使渲染的过程减少了这一步,使渲染的时间减少从而提高性能。 我们今天来说说前端图形渲染优化,因为我接下来的时间可能要开始研究webgl方面的东西,所以就在这里把之前做过的H5做一个总结,现同步发布于GERRY_BLOG,TiMiGerry-知乎,转载请保留链接。...

    stdying 评论0 收藏0
  • WEB/H5性能优化总结

    摘要:如下图所示一重绘与回流前端性能优化最关键的就是减少页面的重绘与回流。很明显就是少了一步,这是因为把会触发回流的属性用替代,这样就使渲染的过程减少了这一步,使渲染的时间减少从而提高性能。 我们今天来说说前端图形渲染优化,因为我接下来的时间可能要开始研究webgl方面的东西,所以就在这里把之前做过的H5做一个总结,现同步发布于GERRY_BLOG,TiMiGerry-知乎,转载请保留链接。...

    mingde 评论0 收藏0
  • WEB/H5性能优化总结

    摘要:如下图所示一重绘与回流前端性能优化最关键的就是减少页面的重绘与回流。很明显就是少了一步,这是因为把会触发回流的属性用替代,这样就使渲染的过程减少了这一步,使渲染的时间减少从而提高性能。 我们今天来说说前端图形渲染优化,因为我接下来的时间可能要开始研究webgl方面的东西,所以就在这里把之前做过的H5做一个总结,现同步发布于GERRY_BLOG,TiMiGerry-知乎,转载请保留链接。...

    elarity 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<