使用Chrome浏览器的同学应该会经常看到一些网站的搜索框右边有一个麦克风的标志，点击图标后即可连接麦克风进行语音识别搜索，那么这是如何实现的呢？

其实非常简单，这是html5下一个新的属性，通过调用google的语音服务api，用于支持网页内的语音识别输入功能。

只需要在输入框的input上添加一个x-webkit-speech 属性就可以了。

如本博客的搜索框：

<input type="text"  name="edtSearch" x-webkit-speech id="edtSearch" value="Search...." onfocus="if (this.value == 'Search....') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search....';}" />

另外它还可以添加以下属性：

语言种类： lang="zh-CN"

发声改变时触发相关语音识别：onwebkitspeechchange="foo()"

让语音输入的内容更加精确尽量接近搜索内容：x-webkit-grammar="bUIltin:search"

通过平时的使用感觉如果发音清晰的话，识别率还算不错。这是google应用于Chrome浏览器上的一项实验性功能，以上属性同样也对webkit内核浏览器生效。

相关W3C标准参考文档：http://lists.w3.org/Archives/Public/public-xg-htmlspeech/2011Feb/att-0020/api-draft.html

　　早在公元2011年6月3日傍晚，人人网推出了一个很装B且完全无视IE浏览器的功能——拖拽上床。哦，Sorry, 是拖拽上传。本文将重点介绍实现拖拽上传的几个HTML5技术：Drag&Drop、FileReader API和FormData。

　　关于这个拖拽上传，其实国外有很多网站已经有这样的应用，最早推出拖拽上传应用的是Gmail，它支持标准浏览器下拖拽本地文件到浏览器中作为邮件的附件发送。人人网的这个拖拽上传也是同理，可以让使用标准浏览器的用户通过简单的拖拽行为，将本地文件夹中的照片直接上传到人人网，用户体验能得到提升的同时，也希望借此机会推广一下标准浏览器，淘汰IE。人人网当时也向广大用户推出升级浏览器活动，并喊出口号：”工欲善其计算机，必先利其浏览器”。本次拖拽上传的宣传口号：你敢”脱”，我就敢上传…

　　言归正题，首先看看效果，大家如果有人人网帐号的话可以在首页试一试拖拽上传功能，下面是演示视频：

拖拽上传应用主要使用了以下HTML5技术：

• Drag&Drop : HTML5基于拖拽的事件机制.
• File API :  可以很方便的让Web应用访问文件对象，File API包括FileList、Blob、File、FileReader、URI scheme，本文主要讲解拖拽上传中用到的FileList和FileReader接口。
• FormData : FormData是基于XMLHttpRequest Level 2的新接口，可以方便web应用模拟Form表单数据，最重要的是它支持文件的二进制流数据，这样我们就能够通过它来实现AJAX向后端发送文件数据了。

HTML5 Drag&Drop 拖拽事件

　　关于Drag&Drop拖拽事件，之前我写过一篇专门介绍的文章《给力的 Google HTML5 训练营(HTML5 Drag&Drop 拖拽、FileReader实例教程)》，那篇文章详细讲解了Drag & Drap事件的原理和代码实例，这里的拖拽上传实现原理基本上是一样的，大家有兴趣或不太了解的话可以先看看那篇文章，我在这里就不再过多啰嗦了~下面直接出拖拽上传简要代码实例：

获取文件数据 HTML5 File API

　　在之前那篇文章中我也有介绍过关于File API中的FileReader接口，作为 File API 的一部分，FileReader 专门用于读取文件，根据 W3C 的定义，FileReader 接口 “提供一些读取文件的方法与一个包含读取结果的事件模型”。关于FileReader的详细介绍和代码实例大家可以先去看看那篇文章。

　　今天我着重介绍一下File API中的FileList接口,它主要通过两个途径获取本地文件列表，一是<input type=”file”>的表单形式，另一种则是e.dataTransfer.files拖拽事件传递的文件信息。很显然，我们这里会用到后者。

　　使用files方法将会获取到拖拽文件的数组形势的数据，每个文件占用一个数组的索引，如果该索引不存在文件数据，将返回null值。可以通过length属性获取文件数量.

　　拖拽上传需要注意的是需要判断两个条件，1:拖拽的是文件不是页面中的元素; 2:拖拽的是图片而不是其它文件,可以通过file.type属性获取文件的类型

　　下面让我们来看看如何结合之前的拖拽事件来实现拖拽图片并在页面中进行预览：

　　这里有一个简单的拖拽图片预览的Demo

　　这时你如果用FireBug等类似调试工具查看DOM的话，会看到<img>标签的src属性是一个超长的文件二进制数据，所以如果DOM有很多这类图片，那就要当心浏览器性能了，因为这些数据极大地扩充的页面的代码量，而每次页面的reflow都会对浏览器形成很大的负担，So,如果这些图片还在DOM中，那就尽量不要做动画或任何重绘操作，如果真的要做就尽量让图片脱离文档流，让其绝对定位比较靠谱。

补充：可以使用window.URL.createObjectURL(file)来获取文件的URL(Chrome下用window.webkitURL.createObjectURL(file))，这种方式获取的URL要比上面说的readAsDataURL简短很多。而且可以省去使用FileReader。这里感谢BinBinLiao的留言建议:) 下面是使用readAsDataURL与createObjectURL生成的代码对比：

优化后的代码：(红色为优化的代码)

　　需要注意的是，window.URL.createObjectURL是有生命周期的，也就意味着你每用此方法获取URL，其生命周期都会和DOM一样，它会单独占用内存，所以当删除图片或不再需要它是，记得用window.URL.revokeObjectURL(file)来释放其内存。当然，如果你没有释放，刷新页面也是可以释放的。

AJAX上传图片(file.getAsBinary & FormData)

　　既然已经获取到了拖拽到web页面中图片的数据，下一步就是将其发送到服务器端了。

　　话说HTML5时代之前，AJAX传输文件二进制流数据是不可能完成的事情，而现在我们完全可以通过file.getAsBinary获取文件的二进制数据流，进而将其当做XHR的data数据传送到后端，8过由于Chrome不支持file的getAsBinary方法，FF3.6+支持此方法。所以Chrome就要另寻它法了，这时我们发现XMLHttpRequest Level 2中的FormData接口完美解决了这个问题，它可以很快捷的模拟Form表单数据并通过AJAX发送至后端，FormData的支持情况是FF5及以上支持，Chrome12及以上支持。

　　 file.getAsBinary获取文件流很简单，但是要想上传数据，就要模拟一下表单的数据格式了，首先看看模拟表单的js代码, FormData模拟表单数据时更是简洁，不用麻烦的去拼字符串，而是直接将数据append到formdata对象中即可：

首先表单数据headers头信息需要以下两项：

• Content-Type ： 设置其为multipart/form-data来模拟表单数据
• boundary ： 表单数据中的分隔符，用于分隔不同的文件或表单项，这是服务器端设置的格式。

发送时的post数据类似这样：

好了，现在文件上传成功后你就可以按照平常AJAX的操作来进行后续处理了。

最后，再来总结一下拖拽上传的技术要点：

1. 监听拖拽：监听页面元素的拖拽事件，包括：dragenter、dragover、dragleave和drop，一定要将dragover的默认事件取消掉，不然无法触发drop事件。如需拖拽页面里的元素，需要给其添加属性draggable=”true”；
2. 获取拖拽文件：在drop事件触发后通过e.dataTransfer.files获取拖拽文件列表，.length属性获取文件数量，.type属性获取文件类型。
3. 读取图片数据并添加预览图：实例化FileReader对象，通过其readAsDataURL(file)方法获取文件二进制流，并监听其onload事件，将e.result赋值给img的src属性，最后将图片append到DOM中。
4. 发送图片数据：使用file.getAsBinary 和 FormData分别模拟表单数据AJAX提交文件流。

OK,拖拽上传就讲到这里，欢迎大家一起探讨。

HTML5提供了一组API用来获取用户的地理位置，如果浏览器支持且设备具有定位功能，就能够直接使用这组API来获取当前位置信息。

该API是navigator对象的一个属性 – Geolocation。目前除了ie内核浏览器外，其他浏览器的最新版本基本都支持Geolocation。同时，移动设备IOS 3.0+ 和 Android 2.0+ 系统也支持它，现在很多移动设备的应用加入了地理定位的元素。

那么我们接下来看如何使用Geolocation API：

一、检查浏览器是否支持Geolocation

var hasGeolocation = !!(navigator.geolocation);
if(hasGeolocation){
alert(“浏览器支持hasGeolocation”);
}


二、navigator.geolocation 的方法:

* navigator.geolocation有三个方法，分别是getCurrentPosition()、watchPosition()和clearWatch()

getCurrentPosition()方法

* getCurrentPosition()方法检索用户的当前位置，但只检索一次。当该方法被脚本调用时，方法以异步的方式来尝试获取宿主设备的当前位置。

* 该方法最多可以有三个参数：

geolocationSuccess：带回当前位置的回调（callback）（必需的）
geolocationError：有错误发生时使用的回调（可选的）
geolocationOptions：地理位置选项（可选的）

调用如下所示：


navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, geolocationOptions);


watchPosition()方法

* watchPosition()方法定期轮询用户的位置，查看用户的位置是否发生改变。其最多可带三个参数。

调用如下所示：


var watchPositionHandler = navigator.geolocation.watchPosition(geolocationSuccess, geolocationError, geolocationOptions);


clearWatch()方法

* clearWatch()方法终止正在进行的watchPosition()，该方法只能带一个参数。在调用时，其找到之前已经开始了的watchID参数并立即停止它。

调用如下所示：


navigator.geolocation.clearWatch(watchID);


三、navigator.geolocation返回一个Position对象:

* Position对象有两个属性：timestamp和coords。timestamp属性表示地理位置数据的创建时间，coords属性又包含七个属性：

coords.latitude：估计纬度
coords.longitude：估计经度
coords.altitude：估计高度
coords.accuracy：所提供的以米为单位的经度和纬度估计的精确度
coords.altitudeAccuracy：所提供的以米为单位的高度估计的精确度
coords.heading： 宿主设备当前移动的角度方向，相对于正北方向顺时针计算
coords.speed：以米每秒为单位的设备的当前对地速度

* 注意altitude, altitudeAccuracy, heading, speed不一定被浏览器支持，所以大家最好看一下官方规范的描述，多一些了解。

四、注意事项

* Geolocation App是不能直接访问设备的，只能通过请求浏览器来访问设备；
* Geolocation涉及到用户隐私，在获取 Geolocation 的时候，需要先征求用户的意思。
* Geolocation目前没有比较好的前端兼容解决方案，但是在移动设备 iOS 和 Android上，我们可以大胆尝试使用。

不得不佩服下谷歌Chrome团队，利用HTML5和CSS3实现了一本相当漂亮的在线电子书：《关于浏览器和互联网20件事》。

访问地址：http://www.20thingsilearned.com

话说这本电子书已经出来很久了，不过今天来看依然觉得相当的赞。我们无需刷新页面，就可以来回切换电子书页面，这正是OPOA（One Page One Application）的完美体现。

现在正在学习关于history API这方面的东西，所以特别感兴趣的是他们如何使用window.history.pushState()和window.history.replaceState()来做页面之间的不刷新切换。

今天查阅了一些资料，基本上对history API有了一个基本了解。

首先要说的就是history是个全局，即window.history。看到这个变量名你一定很熟悉，因为经常可以看到用window.history.back()或者window.history.go(-1)来返回上一页的JavaScript代码。

所以history并不是什么新东西，在HTML4的时代，我们可以使用它的这几个属性和方法：

length：历史堆栈中的记录数。

back()：返回上一页。

forward()：前进到下一页。

go([delta])：delta是个数字，如果不写或为0，则刷新本页；如果为正数，则前进到相应数目的页面；若为负数，则后退到相应数目的页面。

现在，HTML5为其又添加了以下2个方法：

pushState(data, title [, url])：往历史堆栈的顶部添加一条记录。data为一个对象或null，它会在触发window的popstate事件(window.onpopstate)时，作为参数的state属性传递过去；title为页面的标题，但当前所有浏览器都忽略这个参数；url为页面的URL，不写则为当前页。

replaceState(data, title [, url])：更改当前页面的历史记录。参数同上。这种更改并不会去访问该URL。不过目前只有Safari 5.0+、Chrome 8.0+、Firefox 4.0+和iOS 4.2.1+支持。如果想兼容老浏览器的话，可以试试History.js，而且它还修正了一些bug。

当然，在移动平台上，我们可以大胆尝试html5的history API。ios3.0+ 和Android2.0+ 平台的内置浏览器对history都比较完美了，利用它我们可以web app更趋向与native app。

下面，推荐几篇文章：

.Manipulating the browser history

.Session history and navigation

.Manipulating History for Fun & Profit

一、起因

今天看到 twitter 上有人在分享 Min.us 这个网站。说是只要把图片进去，就可以分享。是的，它确实是这样。体验了一翻，无论从界面，还操作的方便性上说，这体验还真是很赞的。

不过，我更在意的是，他用了什么样的技术。想着今晚回来瞄下代码。这下，汗的事来了。这页面看起来不像前端写的啊。乱七八糟的。真是看不下去了。不过，为了更好的用户体验，看吧。从页面的 HTML5 标签猜测到可能用到 HTML5 的某些 API，再查一下 JS 发现了这两行：

function isValidBrowser() {   var browser = BrowserDetect.browser;   var version = BrowserDetect.version;   var OS = BrowserDetect.OS;   //alert(browser+','+version+','+OS);   return (     (browser == 'Chrome' && version >= 6) ||     (browser == 'Firefox' && version >= 3.6) || 	(browser == 'Safari' && version >= 5.0 && OS == 'Mac') ||     ("FileReader" in self && "ondrag" in document)   ); } 

二、DEMO

先来个预览吧，你可以先玩玩，再接着往下面看：HTML5 文件拖放上传

三、如何实现

好吧，确定是使用HTML5。我们来看一下这种技术是怎么实现的吧。嗯，再回看上面的代码，还有我提了这么多次，其实，它就用到两个技术：

1. FileReader，HTML5 File API
2. Drag and Drop，似乎IE从 5.5 就支持了，都不敢说她是 HTML5 了

这里有两篇比较详细的文章，看（等看完我讲的，你再去看吧）：

1. Native HTML5 Drag and Drop
2. Reading local files in JavaScript

现在 1:10 am 了，同学。明天还要上班。而具体讲来，还是需要很多时间滴。我们就简单一点。说些应该注意的吧。具体的实现，你看我 DEMO 的代码吧，和上面的文章吧。

一、 浏览器检测 & 支持

支持的浏览器并不多，我测试的是 Filefox 和 Chrome， winSafari 5.0.2 没通过。IE8 以下就更不用说了，当然，Opera 也没有支持。

if (window.FileReader) { 	// 做事的 } else { 	alert('你的浏览器不支持啊，同学') } 

从 Minus 的代码中可以看出，支持的有：

1. Chrome 6+
2. Firefox 3.6+
3. Mac Safari 5.0+

其他的，就是浮云了。不过，这已经足够了，因为我们可以用 hack 来实现。我们这里，就讲可以用的吧。不可以的，就用原来项目中使用的方法吧。

二、注意事项

1. 浏览器默认行为

   默认情况下，你向 Firefox 拖进一张图片，他可能会重定向于新页面。或者拖过一个链接，可能会让页面重定向。我想，你一定不会让你的用户一边上传，一边又打开一个本地文件页面，然后让他再跑回来上传的页面。那就，阻止浏览器默认行为是非常有必要的。

2. 事件绑定

   你可能发现了，在 DEMO 当我们把东西拖进容器的时候，容器的边框样式变成虚线。因为我这里绑定了一个事件，当文件进入目标是，添加一个 dragenter 的 CLASSNAME。这里需要注意的事，减少事件的解法，你可以在事件 ondragenter 的时候，添加 CLASSNAME ，而 ondragleave 的时候，删除 CLASSNAME。但绑定在 dragover 上，他就像 mouseover ，在拖动的过程中不断解发，这对于浏览器的负担就很大了。可能会导致一些乱七八糟的，类似于崩溃之类的事。

3. dataTransfer 的格式

   你可能需要用 e.dataTransfer.setData 和 e.dataTransfer.getData 来决定是否上传用户拖放的文件。

4. File API 的状态和 result

   检测状态，以便下一步操作，而 result 则可以实现本地预览的功能，让用户知道自己要上传的东西是什么。

5. File API 的读取格式
   • FileReader.readAsBinaryString(fileBlob) -  result 属性会包含一个文件的二进制的格式
   • FileReader.readAsText(fileBlob, opt_encoding) -  result属性将会包含一个文件的文本格式，默认解码参数是 “utf-8”。
   • FileReader.readAsDataURL(file) -  result 将会包含一个文件的 DataURL 格式（图片通常用这种方式）

四、具体的应用

其实我还没有见到国内用上这个技术的网站。刚才瞄了一下 QQ 微博。也没有。对于这些新技术。于我们前端开来，其实挑战并不是会不会使用，而是，如何去使用。

比如，在支付宝，下次需要改版用户上传身份证认证的时候，或许我会去推动这样的改进。又比如，如果是我在做 QQ 微博，或者任何一个微博，我将会提供一个让用户拖让一张图片就能上传的功能。

HTML5 能用到的地方太多了。就慢你没想法。因为别人其实并不清楚，连最清楚的你，前端，都不去推动，还能有谁去推动呢？

好吧。在接下来的项目中，你，或许也可以试试。

　　1.Let's Crate

　　Let's Crate，采用了较新的手艺，拖曳就能快速上传文件(但需要浏览器的撑持，建议使用谷歌浏览器)的一款国外网盘，简单易用，它不需要注册，打开页面后，直接把要上传的文件拖曳到页面中心的木箱里，完成后，会生成文件分享链接。还有它会提醒你注册一个帐户。若是不想注册，那么复制分享链接，但只能使用30 分钟，相当于的用于姑且分享的，建议注册，注册后可以看到你今朝成立的文件夹数、上传文件总数以及可使用的空间，今朝免费帐户可以使用的容量为 200MB。

　　网址：

　　http://www.letscrate.com/

　　2.Ge.tt

　　Ge.tt，一个设计精练清雅文件存储分享网盘，上传速度很快。它最年夜的特点在于上传存储分享极其精练便捷，就跟它精练的域名一样，Ge.tt页面只有一个精明的上传文件的按钮。

　　它为你供给无限量的收集空间，免费用户撑持保留文件30天，撑持批量上传，可是是经由过程一路选择当地多个文件上传，不需要你一个一个添加文件，一次最多可以上传30个，上传完成后系统会供给超短分享外链地址，也供给一键分享到Facebook和Twitter，当你的鼠标滑过此链接时可复制该链接与你的伴侣分享。

　　此外，您还可以经由过程注册获得额外功能，如对下载次数的实时统计、更长久的文件保留时刻。

　　网址：http://www.ge.tt/

　　3..Min.us

　　Min.us，带给你全新上传体验在线图片存储，浏览，分享和打点工具。页面很是精练，您只需把图片拖拽到Min.us的页面里，图片就能自动上传。若是想成批上传图片，只需用鼠标拔取多张一块拖拽到Min.us即可。要考试考试此项功能，必需你的浏览器是Firefox 3.6+, Chrome, Safari, IE9浏览器。否则，会呈现指定文件上传的上传页面。图片上传后Min.us会自动完成而且生成相册链接，便利您分享给伴侣，有作为编纂用（Edit）链接，有用来分享的（Viewer）链接。在每个图片正下方有一个链接（Link to image）便利你将上传后的图片贴到任何网站和博客中。

　　今朝Min.us撑持上传的图片名目有：JPEG, JPG, GIF, PNG, APNG，BMP。撑持单张7MB以下的图片上传，每个相册图片不跨越50张，上传的图片是永远保留的。

　　网址：http://min.us/

　　4.PicsEngine

　　PicsEngine，一款在线图片打点存储软件，近似与桌面版的picasa，你也可以将它算作专注于图片存储的网盘。PicsEngine打点照片很是便利轻易，供给使用标签来智能打点相册。它的整体界面设计很是酷的，供给了无限的存储空间，而且可以从任何处所来进行访谒。

　　PicsEngine有一个强年夜的很新的功能，就是你可以直接从桌面拖动照片到浏览器进行上传，当然体验这一功能你需要安装较高版本的网页浏览器

导语：前年圣诞节上，西班牙程序员Roman Cortes带来了用纯javascript脚本编写的神奇3D圣诞树，令人印象深刻。2月14日情人节就要来临了，还是Roman Cortes，这次他又带来了用javascript脚本编写的红色玫瑰花。用代码做出的玫瑰花，这才是牛逼程序员送给女友的最好情人节礼物呢！(提示：在不同浏览器下观看效果、速度会有很大的不同)

图片是由代码生成，用户可以刷新该页面，重复观看这朵玫瑰的呈现过程。

3D玫瑰花的实现代码如下：

当然，感兴趣的人可以了解下面的实现过程与相关理论：

这朵三维代码玫瑰的呈现效果采用了蒙特卡罗方法，创造者对蒙特卡罗方法非常推崇，他表示在功能优化和采样方面，蒙特卡罗方法是“令人难以置信的强大工具”。关于蒙特卡罗方法可以参考：Monte Carlo method 。

具体操作：

外观采样呈现效果绘制

我用了多个不同的形状图来组成这朵代码玫瑰。共使用了31个形状：24个花瓣，4个萼片，2个叶子和1根花茎，其中每一个形状图都用代码进行描绘。

首先，来定义一个采样范围：

然后，编写形状描绘代码：

这时，看到的效果是这样的：

现在，尝试一下更密集的采样间隔：

正如现在所看到的，因为采样间隔越来越密集，点越来越接近，到最高密度时，相邻点之间的距离小于一个像素，肉眼就看不到间隔（见0.01）。为了不造成太大的视觉差，再进一步缩小采样间隔，此时，绘制区已经填满（比较结果为0.01和0.001）。

接下来，我用这个公式来绘制一个圆形：（X-X0）^ 2 +（Y-Y0）^ 2 <半径^ 2，其中（X0，Y0）为圆心：

为了防止溢出，还要加上一个采样条件：

结果如下：

有不同的方法来定义一个圆，其中一些并不需要拒绝采样。我并无一定要使用哪一种来定义圆圈的意思，所以下面用另一种方法来定义一个圆：

如图：

（此方法相比前一个方法需要密集采样以进行填充。）

好了，现在让圆变形，以使它看起来更像是一个花瓣：

结果：

这看起来已经很像一个玫瑰花瓣的形状了。在这里也可以试试通过修改一些函数数值，将会出现很多有趣的形状。

接下来应该给它添加色彩了：

结果：

一片带色的花瓣就出现了。

3D曲面和透视投影

定义三维表面很简单，比如，来定义一个管状物体：

接着添加投影透视图，首先需要我们定义一个摄像头：

如上图，将摄像头放置在（0，0，Z）位置，画布在X / Y平面。投影到画布上的采样点为：

效果为：

z-buffer

z-buffer在计算机图形学中是一个相当普遍的技术，在为物件进行着色时，执行“隐藏面消除”工作，使隐藏物件背后的部分就不会被显示出来。

上图是用z-buffer技术处理后的玫瑰。(可以看到已经具有立体感了)

代码如下：

旋转

你可以使用任何矢量旋转的方法。在代码玫瑰的创建中，我使用的是欧拉旋转。现在将之前编写的管状物进行旋转，实现绕Y轴旋转：

效果：

蒙特卡罗方法

关于采样时间，间隔过大过小都会引起极差的视觉感受，所以，需要设置合理的采样间隔，这里使用蒙特卡罗方法。

设置a和b为随机参数，用足够的采样完成表面填充。我每次绘制10000点，然后静待屏幕完成更新。

另外需要注意的是，如果随机数发生错误时，表面填充效果会出错。有些浏览器中，Math.random的执行是线性的，这就有可能导致表面填充效果出错。这时，就得使用类似Mersenne Twister（一种随机数算法）这样的东西去进行高质量的PRNG采样，从而避免错误的发生。

完成

为了使玫瑰的每个部分在同一时间完成并呈现，还需要添加一个功能，为每部分设置一个参数以返回值来进行同步。并用一个分段函数代表玫瑰的各个部分。比如在花瓣部分，我用旋转和变形来创建它们。

虽然表面采样方法是创建三维图形非常著名的、最古老的方法之一，但这种把蒙特卡罗、z-buffer加入到表面采样中的方法并不常见。对于现实生活场景的制作，这也许算不上很有创意，但它简易的代码实现和很小的体积仍令人满意。

希望这篇文章能激发计算机图形学爱好者来尝试不同的呈现方法，并从中获得乐趣。（Roman Cortes）

英文原址：romancortes.com