感谢35公里的投递
ASCII 艺术是一种使用计算机可打印字符（一般为ASCII码中的96个可打印字符）表现图形的一种技术，传统的 ASCII 艺术基于 HTML 代码，然而由于不同浏览器的差别，在一种浏览器下可以完美显示的 ASCII 艺术，到了别的浏览器就面目全非，Web2.0 时代，应该多在 CSS 上做文章，因为目前主流浏览器对 CSS 的支持都非常一致，使用 CSS 实现 ASCII 艺术可以更好地保持不同浏览器间的兼容。

下面这个图很难想象是用 ASCII 艺术做出来的，当然为了简便，我使用的是图片，原始 ASCII 艺术版可在这里看到。



jpeg2css 是一个非常有趣的程序，你提供一副黑白的 JPG 图片给它，几秒种之内，可以为你生成一个 HTML 网页文件，你可以在该网页上看到和源 JPG 图片几乎一模一样的 ASCII 艺术图形，而且是基于 CSS 的，你不用担心该 ASCII 艺术在不同浏览器间的兼容问题。

更多基于 CSS 的 ASCII 艺术 （CSS 原始版可以在这里看到）



jpeg2css 下载地址：
http://www.romancortes.com/ficheros/jpeg2css.zip

本文素材来自：http://www.romancortes.com/blog/tag/css/
COMSHARP CMS编译

第1楼 匿名人士 发表于 2008-05-05 17:18:40

牛X

回复 支持(4) 反对(0)   举报

第2楼 匿名人士 发表于 2008-05-05 17:20:19

验证码 8000



为你写诗

防空洞 第三者的第三者 无辜 apologize foundations let''''s start from here i will be Fragile Heart Fallen metric - Too Little Too Late

回复 支持(2) 反对(0)   举报

第3楼 匿名人士 发表于 2008-05-05 17:21:46

就喜欢这种有技术含量的。

回复 支持(61) 反对(3)   举报

第4楼 匿名人士 发表于 2008-05-05 17:22:13

无聊.

回复 支持(3) 反对(12)   举报

第5楼 匿名人士 发表于 2008-05-05 17:24:20

http://www.romancortes.com/blog/bush-css/

这个太牛了

回复 支持(0) 反对(0)   举报

第6楼 匿名人士 发表于 2008-05-05 17:33:32

telnet bbs时代的东西

回复 支持(7) 反对(4)   举报

第7楼 匿名人士 发表于 2008-05-05 17:38:07

CSS做成這樣太強了，不過我想知道是這樣占的空間大，還是圖片占的空間大？

回复 支持(48) 反对(0)   举报

第8楼 匿名人士 发表于 2008-05-05 17:45:27

这个我以前也做过呵呵

回复 支持(2) 反对(1)   举报

第9楼 Ulysses 发表于 2008-05-05 17:52:58

這玩意兒，類似的，可以去找 utom 問問。

直接將 jpg 轉成 css ，彩色圖片也可以。

回复 支持(2) 反对(0)   举报

第10楼 匿名人士 发表于 2008-05-05 17:56:06

firefox3看布殊完全毁容了

回复 支持(4) 反对(3)   举报

第11楼 匿名人士 发表于 2008-05-05 17:59:37

牛人啊，人牛啊

回复 支持(1) 反对(0)   举报

第12楼 匿名人士 发表于 2008-05-05 18:03:25

当人闲到没事儿干的时候总会想出一种方式自娱自乐一下!

回复 支持(1) 反对(0)   举报

第13楼 aspa 发表于 2008-05-05 18:05:18

你这是文明用语了? 不要以爆治爆. 一点也不大气.

回复 支持(1) 反对(1)   举报

第14楼 aspa 发表于 2008-05-05 18:08:09

其实一点技术含量都没有. 即没用, 又浪费资源. 典型的欧洲人思维. 这属于夷人的糟粕, 知道知道就行了, 千万别学.

回复 支持(5) 反对(14)   举报

第15楼 匿名人士 发表于 2008-05-05 18:09:45

不错，技术含量谈不上

回复 支持(0) 反对(1)   举报

第16楼 匿名人士 发表于 2008-05-05 18:10:08

如果可以拿来编码文字 那就可以无视高墙了

回复 支持(4) 反对(0)   举报

第17楼 匿名人士 发表于 2008-05-05 18:13:36

13KB JPEG－> 41.5KB Html

回复 支持(1) 反对(0)   举报

第18楼 匿名人士 发表于 2008-05-05 18:15:51

这么做就是艺术了？

回复 支持(0) 反对(0)   举报

第19楼 匿名人士 发表于 2008-05-05 18:16:40

支持! 很有技术含量啊。

回复 支持(0) 反对(0)   举报

第20楼 匿名人士 发表于 2008-05-05 18:19:21

因为目前主流浏览器对 CSS 的支持都非常一致

回复 支持(0) 反对(1)   举报

第21楼 匿名人士 发表于 2008-05-05 18:31:35

TMD 牛啊

回复 支持(0) 反对(0)   举报

第22楼 匿名人士 发表于 2008-05-05 18:36:36

“因为目前主流浏览器对 CSS 的支持都非常一致，使用 CSS 实现 ASCII 艺术可以更好地保持不同浏览器间的兼容。”

狗屁，一个IE6撑死你……

回复 支持(5) 反对(0)   举报

第23楼 匿名人士 发表于 2008-05-05 18:43:09

css定义点阵，服了，有意义吗？

回复 支持(0) 反对(0)   举报

第24楼 tra 发表于 2008-05-05 19:06:45

现在的中国议会 都是实用主义者 没创意 没审美能力 没情趣

回复 支持(0) 反对(0)   举报

第25楼 匿名人士 发表于 2008-05-05 19:47:59

我承认我看不懂~~

回复 支持(0) 反对(0)   举报

第26楼 匿名人士 发表于 2008-05-05 19:50:52

不同浏览器的css的兼容性问题一直是困扰着网页开发人员...

这文章的作者脑残么

回复 支持(1) 反对(0)   举报

第27楼 匿名人士 发表于 2008-05-05 20:27:13

文明用语

, 这是很简单的技术, 两年前有就类似的了.

回复 支持(0) 反对(0)   举报

第28楼 匿名人士 发表于 2008-05-05 20:29:31

引用匿名人士发表于2008-05-05 18:13:36的评论:

13KB JPEG－> 41.5KB Html

示例是吧？zip以下，真的比jpg小喔。
13KB JPEG－> 41.5KB Html -> 3.17KB Zip

回复 支持(1) 反对(0)   举报

第29楼 匿名人士 发表于 2008-05-05 20:43:47

引用匿名人士发表于2008-05-05 18:13:36的评论:

13KB JPEG－> 41.5KB Html

jpeg是压缩的。

你要把html压缩了再来比较

回复 支持(1) 反对(0)   举报

第30楼 匿名人士 发表于 2008-05-05 20:58:31

引用Ulyss发表于2008-05-05 17:52:58的评论:

這玩意兒，類似的，可以去找 utom 問問。 直接將 jpg 轉成 css ，彩色圖片也可以。

网址？？

回复 支持(0) 反对(0)   举报

第31楼 匿名人士 发表于 2008-05-05 21:12:05

引用匿名人士发表于2008-05-05 17:38:07的评论:

CSS做成這樣太強了，不過我想知道是這樣占的空間大，還是圖片占的空間大？

不实用，渲染速度很慢，我的破机器上太卡了

回复 支持(0) 反对(0)   举报

第32楼 匿名人士 发表于 2008-05-05 21:22:50

真正的ASCII Art估计是从DEC公司兴起的，他们旗下的智能终端系列可以显示颜色和图形符号，而且利用特殊的代码（所谓ESC序列）可以随意操作屏幕上的图素（一个一个的文字可以被定位、显示、涂色和特殊效果，以及抹掉），于是DEC的工程师就开始以此为基础创作各类基于这种序列的图片。



这种东西一直延续到Web之前的Telnet BBS时代，现在各大高校的BBS系统就是基于VT100的标准化Esc序列制作的界面。

相比之下，这种CSS的所谓“Ascii Art”确实技术含量不高，而且也似乎没有那么有趣。人家只有80x25或者80x50个像素就可以做出千变万化的图片出来，这里用了几十K代码做出来的效果也不过如此而已。 另外，个人觉得极端创意的Ascii art貌似是一个设在荷兰的服务器，有ASCII Art版的星球大战电影（对，是电影，活动的! ）……

回复 支持(2) 反对(0)   举报

第33楼 匿名人士 发表于 2008-05-05 22:06:58

几年前偶就在蓝色理想发过贴啦，现在才贴出来。我的工具也早就放出来啦! ! 哎。。。落后

回复 支持(2) 反对(0)   举报

第34楼 匿名人士 发表于 2008-05-05 22:15:25

引用匿名人士发表于2008-05-05 18:13:36的评论:

13KB JPEG－> 41.5KB Html

你把HTML压缩一下估计又很小了，我的45k-->3k

回复 支持(0) 反对(0)   举报

第35楼 匿名人士 发表于 2008-05-05 22:37:21

http://www.readlog.cn/demo/html/txtimg1.htm

http://www.readlog.cn/demo/html/txtimg2.htm

http://www.readlog.cn/demo/html/txtimg3.htm

http://www.readlog.cn/demo/html/txtimg4.htm

回复 支持(1) 反对(0)   举报

第36楼 匿名人士 发表于 2008-05-06 00:13:29

引用匿名人士发表于2008-05-05 22:37:21的评论:

http://www.readlog.cn/demo/html/txtimg1.htm http://www.readlog.cn/demo/html/txtimg2.htm http://www.readlog.cn/demo/html/txtimg3.htm http://www.readlog.cn/demo/html/txtimg4.htm

牛人! ! 请发教程。

回复 支持(0) 反对(0)   举报

第37楼 匿名人士 发表于 2008-05-06 00:25:11

………………………………………………

╭＊

〓

◢█◣ ███ ◥█◤小心炸弹! ! ! ! ……………………………………………… 这才是我们意义中的ASCII图，是利用ascii码本身的造型和疏密不同来创造的。这个软件几乎不在乎什么码，给他任何字符他都能压缩成点阵后绘图——但这不是ascii艺术了。 我不反对情趣，但生生把一个12k的黑白图片变成了46k的网页，有意思吗？

回复 支持(3) 反对(0)   举报

第38楼 匿名人士 发表于 2008-05-06 01:49:42

IE8下一片白...什么都没有...囧...

回复 支持(0) 反对(0)   举报

第39楼 davix 发表于 2008-05-06 12:37:45

做成這種效果的圖片，不是用svg更好嗎？



外行說話，不對請指點

回复 支持(0) 反对(0)   举报

第40楼 匿名人士 发表于 2008-05-07 12:52:51

咱们有脑残体艺术

回复 支持(0) 反对(0)   举报

第41楼 匿名人士 发表于 2008-05-14 00:02:32

空间虽然可能会小一点（像素少的情况下），但是绘制大量的div要占用很多计算机资源的，只能用于较少的场合

回复 支持(0) 反对(0)   举报

热门评论

匿名人士 发表于 2008-05-05 17:21:46

就喜欢这种有技术含量的。

回复 支持(61) 反对(3)   举报

匿名人士 发表于 2008-05-05 17:38:07

CSS做成這樣太強了，不過我想知道是這樣占的空間大，還是圖片占的空間大？

回复 支持(48) 反对(0)   举报

匿名人士 发表于 2008-05-05 18:36:36

“因为目前主流浏览器对 CSS 的支持都非常一致，使用 CSS 实现 ASCII 艺术可以更好地保持不同浏览器间的兼容。”

狗屁，一个IE6撑死你……

回复 支持(5) 反对(0)   举报