网站图标在线生成工具 – Ever the best online favicon creator(Beta)

作者:半瓶墨水   链接:http://www.2maomao.com/blog/the-best-online-favicon-creator-beta/

最近几天搞装修,七拼八凑买到了一个不到五十平的蜗居,暂时先用着吧
等老子有钱了,哼哼…买它两个五十平的,一个留着住,一个拆着玩儿 😀

资金不足的情况下,只能够自己张罗装修得大部分,一个字:忙!

所以这个工具写好一周了,直到今天才有时间把它介绍给大家

下面请我们以隆重的掌声欢迎这份给祖国大妈六十周年庆典的献礼。。。啪啦啪啦
(路人甲:这也能献礼,这不是欺负人家不能拒绝嘛。。。)

这是一个工具
这是一个制作图标的工具
这是一个制作网站图标favicon的工具
这是一个专门制作网站图标favicon的免费在线工具

好吧,废话不多说,关门,放图片:
favicon_beta


列一下这个网站图标(favicon)在线工具的功能:

1. 支持铅笔、刷子、直线、方框、填充、魔棒填充(不大容易介绍,自己研究一下就行了)等工具
2. 可以移动整个图片,还有方便的吸管工具
3. 随时可以清除重来,还可以无限回退所有改动操作
4. 支持透明色(就是背后是那种棋格图案的地方)
5. 支持所有主流浏览器:IE/Firefox/Chrome/Safari

实际上,由于功能实在太过于简单,直接去试试就行了,只要记得工具栏最右边的图标是保存并下载就行

后续开发计划
准备这一个月有时间的话,看一下flash和AS3,用它来实现一些图片处理的功能

后续的功能主要有:

1. 从图片导入图标:上除图片或者打开web图片,图片放缩成16×16,然后开始
2. 从已有的网站图标开始创作:输入网址,导入其favicon
3. 生成的图标可以在线共享,在发芽网上永久保留
4. 从已有的图片导入调色板
5. 更大更好更全:支持创建32×32的icon,支持渐变色,支持创建光标文件(.cur),支持创建动态光标。。。

我很清楚,这些计划里面的大多数都会泡汤,兴趣的转移总是很快的

还没有失去兴趣之前,能做多少做多少吧


实现细节
好了,王婆自夸结束,说一下实现细节:
1. 前端就不说了,就是js+css
2. 后端使用python做的一个array to ico的工具,代码共享在代码发芽网上了,有兴趣的自己去看看

关于浏览器的不兼容,前面已经抱怨过了,这次忍不住又出来抱怨一下:

先说说IE: 速度慢,贼慢,现在还没有时间调performance,不知道到底是啥原因。
另外,它支持设置css的background-position属性,但是不支持获取这个属性。
要想获取的时候,必须先要得到background-position-x,再得到background-position-y,然后组合起来。。。

相关讨论参见:Fix for background-position in IE

再说说Firefox: 速度适中,但是不能直接设置和获取background-position-x/y。
写多了web页面的人都知道css sprite是怎么回事吧,不能用直接设置、获取-x/y,意味着你先要获取background-position,然后通过字符串解析出x和y,然后改变其中一个值,再组合起来设置回去。。。

相关讨论参见:Background-position-y, firefox-fails!

最后说说Chrome: 速度飞快,流畅的就像本地程序一样,支持background-position,也支持单独的-x/y。似乎一切都很完美。

但是当我把鼠标光标变成自定义光标(cursor属性)的时候,比如油漆桶工具,鼠标就得用个油漆桶样式的,鼠标的焦点(hotspot)就在油漆桶下面的尖尖上,但是这个hotspot的设置在chrome下是没有用的,它会固执的认为(0,0)才是真正的hotspot!

而且,不同于前面说的IE和Firefox的bug,没有办法可以绕过。

对于方框和划线工具来说,这是很不爽的-鼠标点击了的某个格子,实际却作用在了左上角的格子上…
无奈之下,只好写了一段代码判断浏览器,对于Chrome进行特殊处理,用系统的cursor来代替。。。

关于这个bug的相关讨论参见:
Issue 12244: cursor:url(*.cur) does not respect hotspot
Issue 1446: hand cursor’s hot spot is misplaced

简单的应用,居然引出这么多的浏览器bug,说明准守w3c css3的标准是多么重要啊…日!

一条评论 发表在“网站图标在线生成工具 – Ever the best online favicon creator(Beta)”上

  1. lanbo说道:

    开源的好,支持你的网站,大哥

留下回复