betway必威亚洲官网 7

当你打开网页的时候,使用Canvas实时处理Video

网页无图再不是梦想

2015/08/22 · HTML5 · 1
评论 ·
网页开发

原文出处: 百码山庄   

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

当你打开网页的时候,世界都发生了什么(1)

2015/09/10 · HTML5,
JavaScriptbetway必威亚洲官网, ·
网页

原文出处:
吴迪   

你有没有好奇过,当你试图打开一个网页的时候,这个世界上都发生了一些什么事情?会不会因为你手气键落,产生了蝴蝶效应,指尖的风拂起千年后你梦中的那个女孩的刘海?咳,也不是没有可能。今天我就来告诉你会发生什么事情,你可以沏一壶茶,坐在躺椅上,慢慢品味……

时光倒流到你刚才打开这个页面的那一瞬间…

Hi!大家好,我的名字叫做浏览器,我还有个很酷的英文名字叫做Browser!很高兴认识你!

betway必威亚洲官网 1

什么,你想上百度?没问题!请你告诉我一下,百度的地址是什么?或者说,百度的URL是什么?

对了,给你介绍一下URL,全称Unified Resource
Locator,中文名为统一资源定位符,也就是我们俗称的网址。它就像互联网上的门牌一样,而浏览器就好像的士司机。你只要告诉浏览器你想要看的网页的URL,他就会把你载到那里啦!

betway必威亚洲官网 2

嗯,百度的地址是http://baidu.com是吧,好嘞!我现在就开始帮你去把这个网页给请过来。

首先,我先要找到这个网页的家在哪里。网页的家有一个名字叫做服务器,它的英文名叫做Server。服务器本身其实也是一台电脑,跟你家中的电脑其实是非常相似的。只不过相比起来,服务器性能会比普通的电脑的性能来得强劲,因为它需要服务成千上万个人!

betway必威亚洲官网 3

那么这么多的服务器,我怎么找到百度所在的那个服务器呢?就靠你刚才告诉我的URL了!URL只是服务器地址的一个比较好听的名字而已,我没有办法直接通过这个地址找到服务器。其实啊,在服务器的世界里面,他们还有一种更精确的地址表达方式,叫做IP地址。

插一嘴:IP地址是什么,它是怎么工作的,恐怕可以写好几本书了。简单地说,IP地址就是形同192.168.0.1这种形式的数字和英文句号的组合。你可以把它当做相对URL来讲更加准确的地址。

我找到IP地址的方式其实很简单,我只要请操作系统(OS, Operating
System)帮忙就好了。所谓的操作系统,就是类似Windows、Mac
OS一样的软件,你能够在它们上面安装各种各样的软件。其中Mac
OS是苹果电脑专用的操作系统。

betway必威亚洲官网 4

这个从URL到IP地址的过程叫做DNS查找,即DNS
Lookup。天啊,又一个新名词!没关系,你不需要记住这个名词。你所需要知道的是,这里看似操作系统独自很快地完成了这个过程,但是其实它为此所做的事情相当复杂。我们今后将有专门的文章用来介绍这一过程。

HTML5:使用Canvas实时处理Video

2015/09/11 · HTML5 ·
Canvas

本文由 伯乐在线 –
cucr
翻译,唐尤华
校稿。未经许可,禁止转载!
英文出处:mozilla。欢迎加入翻译组。

结合HTML5下的videocanvas的功能,你可以实时处理视频数据,为正在播放的视频添加各种各样的视觉效果。本教程演示如何使用JavaScript代码实现chroma-keying特效(也被称为“绿色屏幕效应”)。

请看这个实例.

缘起

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

建立连接和发送请求

已经顺利拿到了服务器的IP地址,接下来我就要向他要东西啦!首先我希望它把baidu.com对应的网页传送给我。我们之间传输信息的方式比较特殊,不需要我坐地铁去找它然后搬回来,而是我会跟服务器建立一个连接

连接,英文名叫做Connection。实际上,它就像开辟了一个专用的通道,供我们互相之间传递信息。

betway必威亚洲官网 5

接下来,我就会通过这个专用通道,向服务器发起一个请求(Request)。在这个请求里面,我会像服务器阐明我想要的资源是什么,例如在这里,我想要的资源就是百度的首页。

那么具体这个资源的位置我是怎么告诉服务器的呢?还得回到刚才的URL来说!

betway必威亚洲官网 6

一个URL一般由六个部分组成,这里我们只介绍主机名(服务器名)和资源位置(或者说是资源路径)。一个服务器上可以有很多的资源,对应着不同的页面或者文件,例如http://xxx.com/login可以是某网站的登录页面,http://xxx.com/register则可以是某网站的注册页面。这里的/login/register就代表了两个不同的资源(这里是页面)。/是比较特殊的资源路径,叫做“根路径”,通常就是网站的首页了。其实,这里的原理就和我们电脑上的文件夹是一模一样的。

在知道了需要的资源的位置之后,我就会给服务器发送一个请求。这个请求实际上就是一系列的英文字符,就像一篇文章一样。

GET / HTTP/1.1 User-Agent: curl/7.37.1 Host: baidu.com Accept: */*

1
2
3
4
GET / HTTP/1.1
User-Agent: curl/7.37.1
Host: baidu.com
Accept: */*

怎么样,我也是很有文采的吧!在这里,你需要知道的是,GET /即代表,我现在要从服务器上拿下来一个资源,这个资源的位置是/。另外,Host: baidu.com代表我要请求的主机名叫做baidu.com。Host这个英文单词就是有主机的意思!

好了,请求已经准备完毕了,我现在就通过之前建立的连接将这个请求直接送给服务器!

文档内容

本文使用的XHTML文档如下所示。

XHTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <style> body
{ background: black; color:#CCCCCC; } #c2 { background-image:
url(foo.png); background-repeat: no-repeat; } div { float: left; border
:1px solid #444444; padding:10px; margin: 10px; background:#3B3B3B; }
</style> <script type=”text/javascript;version=1.8″
src=”main.js”></script> </head> <body
onload=”processor.doLoad()”> <div> <video id=”video”
src=”video.ogv” controls=”true”/> </div> <div> <canvas
id=”c1″ width=”160″ height=”96″/> <canvas id=”c2″ width=”160″
height=”96″/> </div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style>
      body {
        background: black;
        color:#CCCCCC;
      }
      #c2 {
        background-image: url(foo.png);
        background-repeat: no-repeat;
      }
      div {
        float: left;
        border :1px solid #444444;
        padding:10px;
        margin: 10px;
        background:#3B3B3B;
      }
    </style>
    <script type="text/javascript;version=1.8" src="main.js"></script>
  </head>
 
  <body onload="processor.doLoad()">
    <div>
      <video id="video" src="video.ogv" controls="true"/>
    </div>
    <div>
      <canvas id="c1" width="160" height="96"/>
      <canvas id="c2" width="160" height="96"/>
    </div>
  </body>
</html>

以上代码关键部分如下:

1.创建了两个canvas元素,ID分别为c1和c2。c1用于显示当前帧的原始视频,c2是用来显示执行chroma-keying特效后的视频;c2预加载了一张静态图片,将用来取代视频中的背景色部分。
2.JavaScript代码从main.js文件导入;这段脚本使用JavaScript
1.8的特性,所以在导入脚本时,第22行中指定了版本。
3.当网页加载时,main.js中的processor.doLoad()方法会运行。

渐入主题

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

获得响应

当服务器获得请求之后,经过一系列的工作(可能是类似翻箱倒柜找材料之类的吧),最后将要送还给我的材料,包括网页的代码,全部打包起来形成一个响应(Response),通过连接返回给我。

响应是和请求对应的,一个请求对应一个响应。这就好像问问题一样,一问一答。所以,响应本身其实也就是一系列的英文字符,就像这样:(下面的响应是被简化的版本)

HTTP/1.1 200 OK Date: Mon, 31 Aug 2015 03:06:34 GMT Server: Apache
Cache-Control: max-age=86400 Expires: Tue, 01 Sep 2015 03:06:34 GMT
Last-Modified: Tue, 12 Jan 2010 13:48:00 GMT ETag: “51-4b4c7d90”
Accept-Ranges: bytes Content-Length: 81 Connection: Keep-Alive
Content-Type: text/html <html> …. 此处省略N多行 </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
HTTP/1.1 200 OK
Date: Mon, 31 Aug 2015 03:06:34 GMT
Server: Apache
Cache-Control: max-age=86400
Expires: Tue, 01 Sep 2015 03:06:34 GMT
Last-Modified: Tue, 12 Jan 2010 13:48:00 GMT
ETag: "51-4b4c7d90"
Accept-Ranges: bytes
Content-Length: 81
Connection: Keep-Alive
Content-Type: text/html
 
<html>
    …. 此处省略N多行
</html>

你可以注意到,响应分为两个部分。在13行之上的部分称作响应头(Response
Head),下面的部分称作响应主体(Response
Body)。在这里,响应主体就是网页的代码了。

betway必威亚洲官网 7

好了,到目前为止,我已经拿到了网页的代码。

JavaScript代码

main.js中的JS代码包含三个方法。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:,
网站地图xml地图