文档章节

网页无图再不是梦想

Mr.Zheng
 Mr.Zheng
发布于 2015/08/20 13:48
字数 1685
阅读 158
收藏 8

一直以来,网页开发对优化方面做的工作从未停止。网页无图也是为了减少页面资源请求而提出的一种畅想。无可厚非在网页开发的历程中在网页无图方面我们已经取得了不朽的成就:从一开始零零碎碎的小图标资源,到后来小图标合并成一个图片出现雪碧图,再到后来Webfont的出现不仅可以取代雪碧图,而且彻底解决了图标管理难,变色实现麻烦的问题。今天我要跟大家介绍一个小工具,也是可以帮助实现网页无图这一终极目标。理论上来讲,它可以将任何一张图片转换成一个不带图片,不带背景图的干干净净的html标签。但是这有前提:你的计算机得有足够的资源去支撑。

缘起

那是一个工作日的早上,我向往常一样准时到达了工作岗位上,启动电脑,打开浏览器我偶然发现了一篇名曰《18个你可能不相信是用CSS制作出来的东西》的文章,出于职业敏感,也出于好奇我就点进去看了一看,发现其中有一个很有意思的作品:http://codepen.io/HugoGiraudel/full/gpcwa/,它仅仅用一个div标签就完成了这幅作品,于是我们几个同事好奇使然,开始分析它的实现,渐渐有了下面即将介绍的工具的影子。

渐入主题

既然可以使用一个标签制作出一副精美的像素图,那么是否就意味着可以用一个标签还原任一一张图片?唯一不能还原的是图片的精细度问题。然而,如果可以精细到每一个像素点,那么高精度的还原整张图也完全可行,只是这必将消耗非常多的计算机资源。这一设想便是催生这个小工具的催化剂,于是我便开始构思起来。

案例分析

通过使用开发者工具分析以上案例的源码,我发现其实它的实现并不难。我们知道在CSS3中新增了一个设置盒子阴影的box-shadow属性,而这个属性可以同时设置任意多个不同颜色和扩散度的阴影块,而案例正是完美的诠释了这个新属性。

既然如此,那么我们现在来做个试验,我们在任一一张图上覆盖上一个个大小相同的小方格子,我们就可以将任何一张图片分隔成一个个的小方格,我们只要知道这些小方格的大小、顺序和位置,我们就可以重组这张图片,如下对比图所示:

但是,有个问题:box-shadow的引用颜色是单色的,而每个盒子范围内的图案是复杂的,我们如何去处理这个问题?

因为box-shadow只能设置颜色,所以这个问题的结果只有一个,找出一个能代表这个格子的颜色,那么选取哪一个颜色值就因人而异了,可以选格子四角的任意一个、可选中心点,可选格子内的任意一个点,我选择的是格子的左上角这个点。我们不难发现,如果我们尽可能的缩小格子,小到只剩下一个像素大小,我们就可以完整的还原一张图片了。

技术实现

首先,我们考虑如何根据图片去取到每个格子的颜色值?这个问题并不难,HTML5为我们提供了Canvas标签,而通过Canvas我们可以使用getImageData方法获取到画布中任一一个点的颜色信息以及透明度信息。

然后,我们来考虑如何设计我们的小工具。第一步,根据不同的图片可能会适合不同的格子大小,所以我会保留一个size选项用于设置盒子的大小;第二步,格子与格子之间是否保留间隙,可能根据用户习惯会有不同,所以我提供space选项来设置间隙大小;第三步,格子实际就是一个盒子的其中一个阴影,而阴影的形状是可以根据盒子本身发生变化的,所以我提供radius属性来配置格子圆角大小;最后,既然我们得到的将是一个html标签,那么标签是可以带有各种属性的(比如:id、class等),所以我提供一个attrs属性(一个json对象),来设置生成的html元素的属性。好了,万事俱备,只欠代码实现了!

最后,我们梳理逻辑,封装代码,完成了最基础的版本。效果如下演示:

Picture to Element

为了方便大家看到更真实的效果,这里给大家提供在线DEMO

总结

从功能上来看,我实现了图片到html元素的转换,但是可能并非是最好的网页无图实现方案,因为工具转换出的HTML标签,设置了太多的阴影块,对浏览器的渲染并不友好,会对用户计算机硬件有一定的要求,特别是块大小为1(即完整还原图片)的时候,转换过程非常缓慢,如果图片再大些,极有可能导致用户浏览器崩溃,因此建议大家测试时慎用大图做测试。而且,转换后得到的html标签和样式字符串大小将有可能远远超过图片本身的大小,所以我只能说这是一种可行的技术方案,但未必是好的实现方案。(然并卵)

作者博客:百码山庄

© 著作权归作者所有

共有 人打赏支持
Mr.Zheng
粉丝 53
博文 22
码字总数 38792
作品 0
杭州
网页/平面设计
私信 提问
加载中

评论(3)

Mr.Zheng
Mr.Zheng

引用来自“lingyue1012”的评论

本想着可以防止盗图。。结果不行。。。大图产生大量html,浏览器被拖垮
200x200以内的图应该可以酌情考虑使用,不过一个页面图片如果太多可能也要慎重
lingyue1012
lingyue1012
本想着可以防止盗图。。结果不行。。。大图产生大量html,浏览器被拖垮
Duziee
Duziee
79
JDBC:使用连接池管理连接

一、数据库连接池 数据库连接是一种关键的有限的昂贵的资源,这一点在多用户的网页应用程序中体现得尤为突出。对数据库连接的管理能显著影响到整个应用程序的伸缩性和健壮性,影响到程序的性...

雪猴儿
2014/05/06
1K
0
360浏览器全面支持HTML5页游开发者受益

  近日,360安全浏览器6.0超速版正式发布,新版本在保证用户安全上网的同时,大幅提升了上网浏览速度。值得一提的是,360安全浏览器超速版加强了对HTML5的支持, HTML5test测试成绩可达465...

it168网站
2012/10/22
0
0
网页设计基础

网页设计基础 一、网站的概述 1、 网页与网站 浏览网页时在浏览器中看到的一个个页面就是网页,而多个相关的网页的集合就构成了一个网站。 举例:(搜狐网)(百度网)(优酷网)等等。 2、 浏览网...

MyDear宸
2017/05/12
0
0
网页设计基础

网页设计基础 一、网站的概述 1、 网页与网站 浏览网页时在浏览器中看到的一个个页面就是网页,而多个相关的网页的集合就构成了一个网站。 举例:(搜狐网)(百度网)(优酷网)等等。 2、 浏览网...

MyDear宸
2017/05/15
0
0
iMacros for Firefox

如果你喜欢FireFox网页浏览器,但是厌倦了重复性的任务比如每天访问相同的网站,填写表单,记忆密码,那么iMacros(Firefox版)就是你梦想的解决方案! iMacros设计用来自动执行网页上最具重复...

匿名
2008/09/19
5.5K
1

没有更多内容

加载失败,请刷新页面

加载更多

【spring】- springmvc 工作原理

核心:前端控制器:DispatcherServlet 功能:MVC设计模式中的Controller角色,掌控全局 类图 原理 本质是将DispatcherServlet及关联的Spring上下文环境的初始化工作织入Servlet的生命周期内,...

ZeroneLove
12分钟前
1
0
OSChina 周日乱弹 —— 做一只舔狗,开心时就去舔她,不开心时就舔自己

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @温家成 :分享连诗雅的单曲《水星逆行》 《水星逆行》- 连诗雅 手机党少年们想听歌,请使劲儿戳(这里) @罗马的王 :在家嫌猫吵,去书城看书...

小小编辑
49分钟前
31
3
Ruby中的继承、原型、面向对象、访问域

先有类还是先有对象 从鸡蛋悖论解决可以悟到一个道理,不要从常识上假设非此即彼和绝对静止。 Ruby中的类和对象正是这么个东西 我们创建一个类,那它就是Class这个对象的实例,而Class,于是...

可数局部基
今天
5
0
什么时候使用字节流、什么时候使用字符流,二者的区别

在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成。 InputStream 和OutputStream,...

watermelon11
今天
6
0
Alpakka Kafka,反应式Kafka客户端

Alpakka Kafka 是一个要用于 Java 和 Scala 语言的开源的流感知和反应式集成数据线项目。它建立在 Akka Stream之上,提供了 DSL 来支持反应式和流式编程,内置回压功能。Akka Streams 是 Re...

羊八井
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部