本文是《2012年度最独特的网页设计作品展示》第二篇，2012年对于网页设计领域来说是非常有趣的一年，响应式设计的流行孕育了辉煌的重新设计：巧妙的布局、清晰的排版和强烈的色彩对比。这里分享一组独特的网页设计作品，这并不是一个完整的集合，只是众多优秀网页作品的代表。
您可能感兴趣的相关文章- 20个与众不同的网页联系表单设计案例
- 让人惊叹的国外创意404错误页面设计
- 20个模糊背景在网站中的经典应用案例
- 10套精美的免费网站后台管理系统模板
- 25个以全屏照片为背景的精美网页作品
Lotta Nieminen
Sound Creatures Pictoplasma
Joint
Wicked Palate
Nudge
Bad Racket
梦想天空博客关注前端开发技术，展示最新HTML5和CSS3应用，分享实用的jQuery插件，推荐网页设计案例。
Banger’s
Formfett
Squarespace
Muriel Labro
Circles
nanozoom
Drexel University
您可能感兴趣的相关文章- 25个以全屏照片为背景的精美网页作品
- 30个与众不同的国外优秀网站设计案例
- 让人惊叹的国外创意404错误页面设计
- 16个精美的HTML5作品集网站设计案例
- 10套精美的免费网站后台管理系统模板
本文链接：前端视界：2012年度最独特的网页设计作品展示
编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
hide
本文链接
敝校的教务管理系统（貌似不止我们学校用呢），一到选课时间服务器各种崩不解释，有时为了选个课就要反复输入验证码，一想到千千万万的大学生把时间浪费在输入验证码上面，我就觉得，我有义务拯救一下人类。
搜了一下，看到这篇文章，3年前的文章了。我参考了前半部分，借助TamperMonkey这个插件，大概实现了想要的效果。可以在Userscript获取这个脚本，GitHub上面也有，代码写得丑，求debug，求指教。
说下思路：HTML 5中的canvas有个接口getImageData可以用来从验证码图像中取得像素数据。每一个像素有对应r,g,b,a四个值，r,g,b是红绿蓝三色，a是透明度。
观察到教务管理系统的验证码是5个数字，字体字号大小都不变，而且虽然背景虽然有干扰，但是很明显跟字体颜色有很大区别，所以就用了一个很粗糙的方法：我们知道，颜色越浅，rgb值越大，颜色越深，rgb值越少。于是我对每一个像素点进行判断，rgb的和小于350（这个值是测出来的）的就是属于字体的像素，为了方便观察，把它的rgb值都设置为255，否则设置为0。这样就获得了一个黑底白字的图片了。
ctx.drawImage(img,0,0);
var c = ctx.getImageData(0,0,img.width,img.height);
for(i=0; i<c.height; i++){
for(j=0; j<c.width; j++){
var x = (i*4)*c.width+(j*4);
var r = c.data[x];
var g = c.data[x+1];
var b = c.data[x+2];
if(r+g+b > 350){
c.data[x] = c.data[x+1] = c.data[x+2] = 0;
}
else{
c.data[x] = c.data[x+1] = c.data[x+2] = 255;
}
}
}
然后我用画图工具放大图片，观察了一下，得出每个数字是一个12*8像素的矩形，再之后就求出每一个数字对应的像素个数，发现0和8还有6和9的像素个数是一样的，就进行一下特判（比如正中间有像素的就肯定是8而不是0了）。然后……还是观察一下……每个数字对应的矩阵的坐标……写出这个函数：
var num = 0;
for(i=y1; i<y2; i++){
for(j=x1; j<x2; j++){
var x = (i*4)*imgData.width+(j*4);
if(imgData.data[x] == 255)num++;
}
}
switch(num)
{
case 56:{
j = (x1+x2)/2;
i = (y1+y2)/2;
var x = (i*4)*imgData.width+(j*4);
if(imgData.data[x] == 255)
return 8;
else
return 0;
}
case 30:return 1;
case 50:return 2;
case 51:return 3;
case 48:return 4;
case 57:return 5;
case 58:{
i = y2-2;
j = x1;
var x = (i*4)*imgData.width+(j*4);
if(imgData.data[x] == 255)
return 9;
else
return 6;
}
case 37:return 7;
default:return 0;
}
}
原文用了神经网络来判断，准确率大大提高，我不会用，所以就没用了……
我用这个方法获得的验证码准确率也有95%以上，暂时够用了。有空再研究一下神经网络好了。
有需要的同学可以拿去用，Chrome浏览器要先装TamperMonkey，Firefox则是GeaseMonkey，然后安装这个脚本就ok了。
本文链接
简单总结一下前几篇文章的内容，《浏览器插件之ActiveX开发（一）》简单介绍了一下如何在Vs.net 2008下用C++开发基于MFC的ActiveX插件，《浏览器插件之ActiveX开发（二）》介绍了开发插件时可能遇到的问题，《浏览器插件之ActiveX开发（三）》介绍了如何注册插件以及如何打包成cab文件。但是，到目前为止还没有专门提及如何在Web页面中调用插件，本文主要针对这个问题进行展开。
一、用<Object>标签调用ActiveX
1、Object标签基本用法
在Html页面中调用ActiveX插件最简单常用的方法是：
classid="clsid:03AD53E8-D7E7-485D-A39A-D07B37DEFBC9"
width="0"
height="0">
</object>
id属性就不用解释了，和html中其他元素的id一样，是DOM树中各元素的唯一标识。width和height表示该ActiveX在Web页面中占位的大小，对于仅提供接口无UI界面的ActiveX来说将其设置为0即可，因为不需要在页面上显示任何内容（对于需要显示界面的ActiveX，需要在项目里创建Dialog及写相应逻辑，可以参考“A Complete ActiveX Web Control Tutorial”实例 ）。
classid属性在这里是一个非常关键的属性，IE正是通过他才能正确找到要调用的ActiveX的。每个ActiveX均有一个唯一的id来表示，这就是classid，在我们创建MFC ActiveX Control项目时Vs.net 2008就帮我们生成了这个id, 可以在程序的.idl文件最下方找到这个ID值：
一般不建议手动修改程序中的这个uuid值，因为在xxxxCtrl.cpp文件中也用到了这个id值，只是表现形式不一样罢了：
控件注册成功后，这个classid及控件文件位置等信息均写入注册表了，如下所示：
当然，如果ActiveX还定义了其他属性，也可以在<object>中以属性的形式给他们赋值。
如果用户的计算机已经注册了该插件（例如通过Setup.exe方式），那么Html引用上段代码后就可以通过js调用插件的接口和属性了（再次提示一下，ActiveX只能在IE浏览器运行，也就是<object…>这段代码在firefox等其他浏览器是不能正常工作的）。
<legend>Read Card No Testing</legend>
卡号：<input type="text" id="txtCardNo_Read" maxlength="32" readonly />
<input type="button" id="btnRead" value=" Read CardNo " onclick="javascript:readCardNo();" />
</fieldset>
<fieldset>
<legend>Write Card No Testing</legend>
卡号：<input type="text" id="txtCardNo_Write" maxlength="32" />
<input type="button" id="btnWrite" value=" Write CardNo " onclick="javascript:writeCardNo();" />
</fieldset>
<script type="text/javascript">
var txtCardNo_Read = document.getElementById("txtCardNo_Read");
var txtCardNo_Write =