iOs组合图标

背景介绍
jiqimao01

这个是前年多啦A梦周年庆时,官方的活动。他们发布了16款App,接着就发布消息出去,让粉丝们来集合这些特殊的App(营销活动)。

其实仅仅利用浏览器的Add to HomeScreen就可以做出来效果,一直想用PHP来实现下,虽然PHP还不算很熟,但做这样小应用应该还算可以 >”<.

进入正题….

用户端流程:
1、用户上传一张图片
2、程序自动把图片按照一定的比例切图
3、输出每一个图片,按照iOS浏览器的<link rel=”apple-touch-icon” href=”xxx.png” />的格式输出
4、用户利用浏览器的Add To Home Sreen功能,添加每张图片到桌面

项目工具
语言:Php+Mysql
PHP:用到了上传、切图等功能,如imagecopy、imagejpeg等函数
Mysql:建一个表用来记录碎片图片的路径
原理:利用iOs 浏览器的Add To Home Sreen功能

V1.0版本 
一开始,仅仅以为把图片进行一定比例切图就可以了,但最后放到桌面的效果如下:
1381121908

出现的问题是:图形是完整的,但是却出现了错位的情况(如右上角),因此形象看起来很奇怪。(ps.V1.0版本可用于类似九宫格的切图应用)

后来重新研究原图
jiqimao01

可能由于有PS的基础,因此很容易发现原先的图片,其实是把通过切掉原先的某些部分来组合的。

刚好,记得先前看过一篇文章,是介绍iOs界面规范的资料,大体的意思是:
图标横向的间隔是图标宽度的1/3,图标纵向的间隔是图标宽度的2/3 (如下图)
jiqimao02


V2.0版本
于是就有了第二版本,有了iOs图标宽高的规范,那么这时候就是调整切图的位置,把纵横的间隔算出来。
结果如下,算成功完成了。
1381795039

发现一个问题是,由于中间部分间隔部分,导致图像有点“破损”

1381069961

但如果用图片的内容形象比较大,那么组成的图片会“相对”好看一些。

V3.0版本
其实V2.0已经很完整,但是还是不够完美。
如果能支持图片位置的切图,就是图片上传之后,增加一个环节,让用户选择截取的位置。类似9cut应用,让用户选择要切图的位置、图片可以放大、缩小等等。

最后
由于技术和时间的原因,V3.0版本只能稍后再完善。
V2.0版本地址:http://jian.co/phonescreen/  还是“毛培装修”,等有时间再“装修”下 哈哈

做这样的应用的意义在哪里呢?也许可以用于营销活动..或是其他
这次项目所有的程序源码都来自网络,感谢网络。
当然V2.0是经过本人“改装”了的 哈。
对于我,主要学习了PHP的imagecopy、imagejpeg函数功能。