程序員大神整理的好用工具

術(shù)站點(diǎn)

Hacker News：非常棒的針對(duì)編程的鏈接聚合網(wǎng)站
Programming reddit：同上
MSDN：微軟相關(guān)的官方技術(shù)集中地，主要是文檔類
infoq：企業(yè)級(jí)應(yīng)用，關(guān)注軟件開發(fā)領(lǐng)域
OSChina：開源技術(shù)社區(qū)，開源方面做的不錯(cuò)哦
cnblogs，51cto，csdn：常見的技術(shù)社區(qū)，各有專長(zhǎng)
stackoverflow：IT技術(shù)問答網(wǎng)站
GitHub：全球最大的源代碼管理平臺(tái)，很多知名開源項(xiàng)目都在上面，如Linux內(nèi)核，
OpenStack等免費(fèi)的it電子書：http://it-ebooks.info/
DevStore:開發(fā)者服務(wù)商店

不錯(cuò)的書籍

人件
人月神話
代碼大全2
計(jì)算機(jī)程序設(shè)計(jì)藝術(shù)
程序員的自我修養(yǎng)
程序員修煉之道
高效能程序員的修煉（成為一名杰出的程序員其實(shí)跟寫代碼沒有太大關(guān)系）
深入理解計(jì)算機(jī)系統(tǒng)
軟件隨想錄
算法導(dǎo)論（麻省理工學(xué)院出版社）
離線數(shù)學(xué)及其應(yīng)用
設(shè)計(jì)模式
編程之美
黑客與畫家
編程珠璣
C++ Prime
Effective C++
TCP/IP詳解
Unix 編程藝術(shù)
《精神分析引論》弗洛伊德
搞定：無壓力工作的藝術(shù)

平臺(tái)工具（都是開源的好東東哦）

Redmine/Trac：項(xiàng)目管理平臺(tái)
Jenkins/Jira(非開源)：持續(xù)集成系統(tǒng)（Apache Continuum，這個(gè)是Apache下的CI系統(tǒng)，還沒來得及研究）
Sonar：代碼質(zhì)量管理平臺(tái)
git，svn：源代碼版本控制系統(tǒng)
GitLib/Gitorious：構(gòu)建自己的GitHub服務(wù)器
gitbook：https://www.gitbook.io/寫書的好東西，當(dāng)然用來寫文檔也很不錯(cuò)的
Travis-ci：開源項(xiàng)目持續(xù)集成必備，和GitHub相結(jié)合，https://travis-ci.org/
開源測(cè)試工具、社區(qū)（Selenium、OpenQA.org）
Puppet:一個(gè)自動(dòng)管理引擎，可以適用于Linux、Unix以及Windows平臺(tái)。所謂配置管理系統(tǒng)，就是管理機(jī)器里面諸如文件、用戶、進(jìn)程、軟件包這些資源。無論是管理1臺(tái)，還是上萬臺(tái)機(jī)器Puppet都能輕松搞定。
Nagios：系統(tǒng)狀態(tài)監(jiān)控報(bào)警，還有個(gè)Icinga(完全兼容nagios所有的插件,工作原理,配置文件以及方法,幾乎一模一樣。配置簡(jiǎn)單,功能強(qiáng)大)
Ganglia：分布式監(jiān)控系統(tǒng)
fleet：分布式init系統(tǒng)

爬蟲相關(guān)(好玩的工具)

Phantomjs
berserkJS(基于Phantomjs的改進(jìn)版本)
SlimerJS
CasperJS
selenium

Web 服務(wù)器性能/壓力測(cè)試工具/負(fù)載均衡器

http_load: 程序非常小，解壓后也不到100K
webbench: 是Linux下的一個(gè)網(wǎng)站壓力測(cè)試工具，最多可以模擬3萬個(gè)并發(fā)連接去測(cè)試網(wǎng)站的負(fù)載能力
ab: ab是apache自帶的一款功能強(qiáng)大的測(cè)試工具
Siege: 一款開源的壓力測(cè)試工具，可以根據(jù)配置對(duì)一個(gè)WEB站點(diǎn)進(jìn)行多用戶的并發(fā)訪問，記錄每個(gè)用戶所有請(qǐng)求過程的相應(yīng)時(shí)間，并在一定數(shù)量的并發(fā)訪問下重復(fù)進(jìn)行。
squid（前端緩存），nginx（負(fù)載），nodejs（沒錯(cuò)它也可以，自己寫點(diǎn)代碼就能實(shí)現(xiàn)高性能的負(fù)載均衡器）：常用的負(fù)載均衡器
Piwik：開源網(wǎng)站訪問量統(tǒng)計(jì)系統(tǒng)
ClickHeat：開源的網(wǎng)站點(diǎn)擊情況熱力圖
HAProxy：高性能TCP /HTTP負(fù)載均衡器
ElasticSearch：搜索引擎基于Lucene
Page Speed SDK和YSLOW
HAR Viewer: HAR分析工具
protractor：E2E（end to end）自動(dòng)化測(cè)試工具

Web 前端相關(guān)

GRUNT: js task runner
Sea.js: js模塊化
knockout.js：MVVM開發(fā)前臺(tái)，綁定技術(shù)
Angular.js: 使用超動(dòng)感HTML & JS開發(fā)WEB應(yīng)用！
Highcharts.js，F(xiàn)lot:常用的Web圖表插件
Raw：非常不錯(cuò)的一款高級(jí)數(shù)據(jù)可視化工具
Rickshaw:時(shí)序圖標(biāo)庫，可用于構(gòu)建實(shí)時(shí)圖表
JavaScript InfoVis Toolkit：另一款Web數(shù)據(jù)可視化插件
Pdf.js，在html中展現(xiàn)pdf
ACE，CodeMirror：Html代碼編輯器（ACE甚好啊）
NProcess：絢麗的加載進(jìn)度條
impress.js：讓你制作出令人眩目的內(nèi)容展示效果(類似的還有reveal)
Threejs：3DWeb庫
Hightopo：基于Html5的2D、3D可視化UI庫
jQuery.dataTables.js:高度靈活的表格插件
Rapha?l：js，canvas繪圖庫，后來發(fā)現(xiàn)百度指數(shù)的圖形就是用它繪出來的
director.js：js路由模塊，前端路由，Nodejs后端路由等，適合構(gòu)造單頁應(yīng)用
pace.js：頁面加載進(jìn)度條
bower：Web包管理器
jsnice：有趣的js反編譯工具，猜壓縮后的變量名 http://www.jsnice.org/
D3.js: 是一個(gè)基于JavaScript數(shù)據(jù)展示庫（類似的還有P5.js）
Zepto.js：移動(dòng)端替代jQuery的東東，當(dāng)然也可以使用jquery-mobile.

UI框架：Foundation，Boostrap，Pure，EasyUI，Polymer

前端UI設(shè)計(jì)師必去的幾個(gè)網(wǎng)站：Dribbble，awwwards，unmatchedstyle，UIMaker

Mozilla 開發(fā)者中心：https://developer.mozilla.org/en-US/

圖標(biāo)資源：IcoMoon（我的最愛），Themify Icons，F(xiàn)reePik，Glyphiconsart

Dialog:非常漂亮的對(duì)話框
AdminLTE：github上的一個(gè)開源項(xiàng)目，基于Boostrap3的后臺(tái)管理頁面框架
Respond.js：讓不懂愛的IE6-8支持響應(yīng)式設(shè)計(jì)
require.js: js模塊加載庫
select2：比chosen具有更多特性的選擇框替代庫
AngularUI：集成angular.js的UI庫
normalize.css: 采用了現(xiàn)代化標(biāo)準(zhǔn)讓各瀏覽器渲染出的html保持一致的庫
CreateJS：Html5游戲引擎Less,Compass:簡(jiǎn)化CSS開發(fā)
emojify.js:用于自動(dòng)識(shí)別網(wǎng)頁上的Emoji文字并將其顯示為圖像
simditor:一個(gè)不錯(cuò)的開源的html編輯器，簡(jiǎn)潔高效
Sencha: 基于html5的移動(dòng)端開發(fā)框架
SuperScrollorama+TweenMax+skrollr:打造超酷的視差滾動(dòng)效果網(wǎng)頁動(dòng)畫
jquery-smooth-scroll:同上，平滑滾動(dòng)插件
Animate.css:實(shí)現(xiàn)了各種動(dòng)畫效果的css庫
Emmet:前端工程師必備，ZenCode的前身
MagicDraw:Uml圖工具

大數(shù)據(jù)處理/數(shù)據(jù)分析/分布式工具

Hadoop：分布式的文件系統(tǒng)，結(jié)合其MapReduce編程模型可以用來做海量數(shù)據(jù)的批處理（Hive，Pig，HBase啥的就不說了），值得介紹的是Cloudera的Hadoop分支CDH5，基于YARN MRv2集成了Spark可直接用于生產(chǎn)環(huán)境的Hadoop，對(duì)于企業(yè)快速構(gòu)建數(shù)據(jù)倉庫非常有用。
Ceph:Linux分布式文件系統(tǒng)（特點(diǎn)：無中心）
Storm：實(shí)時(shí)流數(shù)據(jù)處理，可以看下IBM的一篇介紹（還有個(gè)Yahoo的S4，也是做流數(shù)據(jù)處理的）
Spark：大規(guī)模流式數(shù)據(jù)處理（可以應(yīng)付企業(yè)中常見的三種數(shù)據(jù)處理場(chǎng)景：復(fù)雜的批量數(shù)據(jù)處理（batch data processing）；基于歷史數(shù)據(jù)的交互式查詢（interactive query）；基于實(shí)時(shí)數(shù)據(jù)流的數(shù)據(jù)處理（streaming data processing）），CSND有篇文章介紹的不錯(cuò)
Spark Streaming：基于Spark的實(shí)時(shí)計(jì)算框架
Tachyon：分布式內(nèi)存文件系統(tǒng)
Mesos：計(jì)算框架一個(gè)集群管理器，提供了有效的、跨分布式應(yīng)用或框架的資源隔離和共享Impala：新一代開源大數(shù)據(jù)分析引擎，提供Sql語義，比- Hive強(qiáng)在速度上
SNAPPY：快速的數(shù)據(jù)壓縮系統(tǒng)，適用于Hadoop生態(tài)系統(tǒng)中
Kafka:高吞吐量的分布式消息隊(duì)列系統(tǒng)
ActiveMQ:是Apache出品，最流行的，能力強(qiáng)勁的開源消息總線
MQTT:Message Queuing Telemetry Transport，消息隊(duì)列遙測(cè)傳輸）是IBM開發(fā)的一個(gè)即時(shí)通訊協(xié)議，有可能成為物聯(lián)網(wǎng)的重要組成部分
RabbitMQ：記得OpenStack就是用的這個(gè)東西吧
ZeroMQ：宣稱是將分布式計(jì)算變得更簡(jiǎn)單，是個(gè)分布式消息隊(duì)列，可以看下云風(fēng)的一篇文章的介紹開源的日志收集系統(tǒng)：scribe、chukwa、kafka、flume。這有一篇對(duì)比文章
Zookeeper：可靠的分布式協(xié)調(diào)的開源項(xiàng)目
Databus：LinkedIn 實(shí)時(shí)低延遲數(shù)據(jù)抓取系統(tǒng)

數(shù)據(jù)源獲取：Flume、Google Refine、Needlebase、ScraperWiki、BloomReach

序列化技術(shù)：JSON、BSON、Thrift、Avro、Google Protocol Buffers

NoSql：Apache Hadoop、Apache Casandra、MongoDB、Apache CouchDB、Redis、BigTable、HBase、Hypertable、Voldemort、Neo4j

MapReduce相關(guān)：Hive、Pig、Cascading、Cascalog、mrjob、Caffeine、S4、MapR、Acunu、Flume、Kafka、Azkaban、Oozie、Greenplum

數(shù)據(jù)處理：R、Yahoo! Pipes、Mechanical Turk、Solr/ Lucene、ElasticSearch、Datameer、Bigsheets、TinkerpopNLP自然語言處理：Natural Language Toolkit、Apache OpenNLP、Boilerpipe、OpenCalais

機(jī)器學(xué)習(xí)：WEKA、Mahout、scikits.learn、SkyTree

可視化技術(shù)：GraphViz、Processing、Protovis、Google Fusion Tables、Tableau、Highcharts、EChats（百度的還不錯(cuò)）、Rapha?l.js

Kettle：開源的ETL工具
Pentaho：以工作流為核心的開源BI系統(tǒng)
Mondrian：開源的Rolap服務(wù)器
Oozie：開源hadoop的工作流調(diào)度引擎

開源的數(shù)據(jù)分析可視化工具：Weka、Orange、KNIME

Cobar：阿里巴巴的MySql分布式中間件

C & C++

Thrift:用來進(jìn)行可擴(kuò)展且跨語言的服務(wù)的開發(fā)(類似的還有個(gè)Avro，Google protobuf)。

libevent:是一個(gè)事件觸發(fā)的網(wǎng)絡(luò)庫，適用于windows、linux、bsd等多種平臺(tái)，內(nèi)部使用select、epoll、kqueue等系統(tǒng)調(diào)用管理事件機(jī)制。（對(duì)了還有個(gè)libev呢）

Boost:不多說了，準(zhǔn)C++標(biāo)準(zhǔn)庫

Ptmalloc\Valgrind\Purify

NetworkServer架構(gòu)：acceptor->dispatcher->worker(這個(gè)不算工具哦)

breakpad:崩潰轉(zhuǎn)儲(chǔ)和分析模塊，很多crashreport會(huì)用到

UI界面相關(guān)：MFC、BCG和QT這類的就不說了，高端一點(diǎn)的還有Html和DirectUI技術(shù)：libcef（基于chrome內(nèi)核的，想想使用html5開發(fā)頁面，還真有點(diǎn)小激動(dòng)呢）、HtmlLayout、Duilib、Bolt，非C++的，還有node-webkit也不錯(cuò)，集成了node和webkit內(nèi)核。

游戲開發(fā)相關(guān)

MINA：使用Java開發(fā)手游和頁游服務(wù)器(對(duì)了還有Netty，也很猛的，都是基于NIO的)

HP-Socket：見有有些頁游服務(wù)器使用這個(gè)構(gòu)建的

云風(fēng)的技術(shù)博客：http://blog.codingnow.com/

OGRE：大名鼎鼎的3D圖形渲染引擎

OpenVDB：夢(mèng)工廠C++的特效庫，開源的

cocos2d：跨平臺(tái)2D游戲引擎

unity3d：跨平臺(tái)3D游戲引擎，很火的哦

Nodejs：也有不少使用它來開發(fā)手游和也有服務(wù)器（網(wǎng)易的Pomelo就是哦）

日志聚合，分布式日志收集

Scribe：Facebook的（nodejs + scribe + inotify 同步日志）

logstash:強(qiáng)大的日志收集系統(tǒng)，可以基于logstash+kibana+elasticsearch+redis開發(fā)強(qiáng)大的日志分析平臺(tái)

log.io: nodejs開發(fā)的實(shí)時(shí)日志收集系統(tǒng)

RTP,實(shí)時(shí)傳輸協(xié)議與音視頻

RTP，RTCP，RTSP-> librtp，JRTPLIB(遵循了RFC1889標(biāo)準(zhǔn))

環(huán)形緩沖區(qū)，實(shí)時(shí)數(shù)據(jù)傳輸用

SDL,ffmpeg,live555,Speex

Red5:用Java開發(fā)開源的Flash流媒體服務(wù)器。它支持：把音頻（MP3）和視頻（FLV）轉(zhuǎn)換成播放流；錄制客戶端播放流（只支持FLV）；共享對(duì)象；現(xiàn)場(chǎng)直播流發(fā)布；遠(yuǎn)程調(diào)用。

Python

Eric,Eclipse+pydev,比較不錯(cuò)的Python IDE

PyWin:Win32 api編程包

numpy:科學(xué)計(jì)算包，主要用來處理大型矩陣計(jì)算等，此外還有SciPy，Matplotlib

GUI相關(guān)：PyQt，PyQwt

supervisor:進(jìn)程監(jiān)控工具

Java相關(guān)

常用的IDE：IntelliJ IDEA，Eclipse，Netbeans

Web開發(fā)相關(guān)：Tomcat、Resin、Jetty、WebLogic等，常用的組件Struts，Spring

HibernateNetty: 異步事件驅(qū)動(dòng)網(wǎng)絡(luò)應(yīng)用編程框架，用于高并發(fā)網(wǎng)絡(luò)編程比較好（NIO框架）

MINA：簡(jiǎn)單地開發(fā)高性能和高可靠性的網(wǎng)絡(luò)應(yīng)用程序（也是個(gè)NIO框架），不少手游服務(wù)端是用它開發(fā)的

jOOQ：java Orm框架Activiti:工作流引擎，類似的還有jBPM、Snaker

Perfuse:是一個(gè)用戶界面包用來把有結(jié)構(gòu)與無結(jié)構(gòu)數(shù)據(jù)以具有交互性的可視化圖形展示出來.

Gephi:復(fù)雜網(wǎng)絡(luò)分析軟件, 其主要用于各種網(wǎng)絡(luò)和復(fù)雜系統(tǒng)，動(dòng)態(tài)和分層圖的交互可視化與探測(cè)開源工具

Nutch:知名的爬蟲項(xiàng)目，hadoop就是從這個(gè)項(xiàng)目中發(fā)展出來的

web-harvest：Web數(shù)據(jù)提取工具

POM工具：Maven+ArtifactoryNetflix

Curator：Netflix公司開源的一個(gè)Zookeeper client library，用于簡(jiǎn)化Zookeeper客戶端編程

Akka:一款基于actor模型實(shí)現(xiàn)的并發(fā)處理框架

EclEmma：覆蓋測(cè)試工具

.net相關(guān)

Xilium.CefGlue:基于CEF框架的.NET封裝，基于.NET開發(fā)Chrome內(nèi)核瀏覽器

CefSharp：同上，有一款WebKit的封裝，C#和Js交互會(huì)更簡(jiǎn)單

netz:免費(fèi)的 .NET 可執(zhí)行文件壓縮工具

SmartAssembly:變態(tài)的.net代碼優(yōu)化混淆工具

NETDeob0：.net反混淆工具，真是魔高一尺道高一丈啊(還有個(gè)de4dot，在GitHub上，都是開源的)

ILMerge：將所有引用的DLL和exe文件打成一個(gè)exe文件

ILSpy:開源.net程序反編譯工具

Javascript.NET：很不錯(cuò)的js執(zhí)行引擎，對(duì)v8做了封裝

NPOI: Excel操作

DotRAS:遠(yuǎn)程訪問服務(wù)的模塊

WinHtmlEditor: Winform下的html編輯器

SmartThreadPool:使用C#實(shí)現(xiàn)的，帶高級(jí)特性的線程池

Snoop: WPF Spy Utility

Autofac: 輕量級(jí)IoC框架

HtmlAgilityPack：Html解析利器

Quartz.NET：Job調(diào)度

HttpLib：@CodePlex，簡(jiǎn)化http請(qǐng)求

SuperSocket：簡(jiǎn)化Socket操作，基于他的還有個(gè)SuperWebSocket，可以開發(fā)獨(dú)立的WebSocket服務(wù)器了

DocX：未安裝Office的情況下操作Word文件

Dapper：輕量級(jí)的ORM類，性能不錯(cuò)

HubbleDotNet：支持接入數(shù)據(jù)庫的全文搜索系統(tǒng)

fastJSON：@CodeProject，高性能的json序列化類

ZXing.NET：@CodePlex，QR，條形碼相關(guān)

Nancy：輕量級(jí)Http服務(wù)器，做個(gè)小型的Web應(yīng)用可以擺脫IIS嘍(Nancy.Viewengines.Razor,可以加入Razor引擎)

AntiXSS：微軟的XSS防御庫Microsoft Web Protection

LibraryJint：JavaScript解釋器

CS-Script：將C#代碼文件作為腳本執(zhí)行

Jexus：Linux下高性能、易用、免費(fèi)的ASP.NET服務(wù)器

Clay：將dynamic發(fā)揮的更加靈活，像寫js一樣寫C#

DynamicJSON：不必定義數(shù)據(jù)模型獲取json數(shù)據(jù)

Antlr：開源的語法分析器（歸到C#不太合適，其他語言也可以去用）

SharpPcap：C#版的WinPcap調(diào)用端，牛逼的網(wǎng)絡(luò)包分析庫（自帶PacketNotNet用于包協(xié)議分析）

Roslyn：C#，VB編譯器

ImageResizer: 服務(wù)端自由控制圖片大小，真乃神器也，對(duì)手機(jī)端傳小圖，PC端傳大圖，CMS用它很方便

UI相關(guān)：DevExpress, Fluent(Office 07風(fēng)格), mui（Modern UI for WPF）

NetSparkle：應(yīng)用自動(dòng)更新組件

ConfuserEx: 開源.net混淆工具

ServiceStack: 開源高性能Web服務(wù)框架，可用于構(gòu)建高性能的REST服務(wù)Expression

Evaluator：Eval for C#,處理字符串表達(dá)式

http://nugetmusthaves.com/

常用工具

Fiddler：非常好用的Web前端調(diào)試工具，當(dāng)然是針對(duì)底層http協(xié)議的，一般情況使用Chrome等自帶的調(diào)試工具也足夠了，特殊情況還得用它去處理
wireshark：知名的網(wǎng)絡(luò)數(shù)據(jù)包分析工具
PowerCmd:替代Windows Cmd的利器
RegexBuddy:強(qiáng)大的正則表達(dá)式測(cè)試工具
Soure Insight：源代碼閱讀神器
SublimeText：程序員最愛的編輯器
Database.NET：一個(gè)通用的關(guān)系型數(shù)據(jù)庫客戶端，基于.NET 4.0開發(fā)的，做簡(jiǎn)單的處理還是蠻方便的
Navicat Premium：支持MySql、PostgreSQL、Oracle、Sqlite和SQL Server的客戶端，通用性上不如Database.NET，但性能方面比Database.NET好很多，自帶備份功能也用于數(shù)據(jù)庫定時(shí)備份。
Synergy : 局域網(wǎng)內(nèi)一套鍵盤鼠標(biāo)控制多臺(tái)電腦
DameWare：遠(yuǎn)程協(xié)助工具集（我在公司主要控制大屏幕用）
Radmin: 遠(yuǎn)程控制工具，用了一段時(shí)間的
DameWare，還要破解，對(duì)Win7支持的不好，還是發(fā)現(xiàn)這個(gè)好用
Listary：能極大幅度提高你 Windows 文件瀏覽與搜索速度效率的「超級(jí)神器」
Clover：給資源管理器加上多標(biāo)簽
WinLaunch：模擬Mac OS的Launch工具
Fritzing：繪制電路圖
LICEcap：gif教程制作git，
svn：版本控制系統(tǒng)Enigma Virtual Box（將exe，dll等封裝成一個(gè)可執(zhí)行程序）
Open DBDiff(針對(duì)SqlServer)數(shù)據(jù)庫同步
SymmetricDS：數(shù)據(jù)庫同步
BIEE,Infomatica，SPSS，weka，R語言：數(shù)據(jù)分析
CodeSmith，LightSwitch：代碼生成
Pandoc：Markdown轉(zhuǎn)換工具，出書用的。以前玩過docbook，不過現(xiàn)在還是Markdown盛行啊。
Window Magnet[Mac]：增強(qiáng)Mac窗口管理功能，想Win7一樣具有窗口拖放到屏幕邊緣自動(dòng)調(diào)整的功能
log explorer：查看SqlServer日志dependency
walker：查詢Windows應(yīng)用程序dll依賴項(xiàng)
Shairport4w：將iPhone，iPad，iPod上的音頻通過AirPlay協(xié)議傳輸?shù)絇C上
ngrok：內(nèi)網(wǎng)穿透工具Axure:快速原型制作工具，還有個(gè)在線作圖的工具國(guó)內(nèi)的一個(gè)創(chuàng)業(yè)團(tuán)隊(duì)做的，用著很不錯(cuò) http://www.processon.com
tinyproxy:（Linux）小型的代理服務(wù)器支持http和https協(xié)議EaseUS Partition
Master：超級(jí)簡(jiǎn)單的分區(qū)調(diào)整工具，速度還是蠻快的，C盤不夠用了就用它從D盤劃點(diǎn)空間吧，不用重裝系統(tǒng)這么折騰哦。
CheatEngine：玩游戲修改內(nèi)存值必備神器（記得我在玩軒轅劍6的時(shí)候就用的它，超級(jí)方便呢）
ApkIDE:Android反編譯神器翻、墻工具（自|由|門、天行瀏覽器）

最后推薦下我的Android學(xué)習(xí)群：110359956，不管你是小白還是大牛，小編我都挺歡迎，不定期分享干貨，包括我自己整理的一份2017最新的Android學(xué)習(xí)資料和零基礎(chǔ)入門教程，送給大家，歡迎初學(xué)和進(jìn)階中的小伙伴。還有最新opengl，opencv，VR，AR技術(shù)防止兩年至三年之后的一批大篩選。
還有MVP最新教程實(shí)訓(xùn)班，歡迎大家加入

近刷臉支付很火，老板們當(dāng)然要追趕時(shí)代潮流，于是就有了刷臉支付這個(gè)項(xiàng)目。前端實(shí)現(xiàn)關(guān)鍵的技術(shù)是攝像頭錄像，拍照和人臉比對(duì)，本文來探討一下如何在html5環(huán)境中如何實(shí)現(xiàn)刷臉支付以及開發(fā)過程中遇到的問題。

1.攝像頭

1.1 input獲取攝像頭

html5中獲取手機(jī)上的圖片，有兩種方式，使用input，如下可以打開攝像頭拍照：

<input type="file" capture="camera" accept="image/*"/>

另外如果想打開相冊(cè)，可以這樣：

<input type="file" accept="img/*">

但是這兩種方式都會(huì)有兼容性問題，用過的同學(xué)可能都知道。

1.2 getUserMedia獲取攝像頭

getUserMedia是html5一個(gè)新的api，官方一點(diǎn)的定義是：

MediaDevices.getUserMedia() 會(huì)提示用戶給予使用媒體輸入的許可，媒體輸入會(huì)產(chǎn)生一個(gè)MediaStream，里面包含了請(qǐng)求的媒體類型的軌道。此流可以包含一個(gè)視頻軌道（來自硬件或者虛擬視頻源，比如相機(jī)、視頻采集設(shè)備和屏幕共享服務(wù)等等）、一個(gè)音頻軌道（同樣來自硬件或虛擬音頻源，比如麥克風(fēng)、A/D轉(zhuǎn)換器等等），也可能是其它軌道類型。

簡(jiǎn)單一點(diǎn)說就是可以獲取到用戶攝像頭。

同上面input一樣，這種方式也有兼容性問題，不過可以使用其他方式解決，這里可以參考MediaDevices.getUserMedia()，文檔中有介紹"在舊的瀏覽器中使用新的API"。我這里在網(wǎng)上也找了一些參考，總結(jié)出一個(gè)相對(duì)全面的getUserMedia版本，代碼如下：

// 訪問用戶媒體設(shè)備
getUserMedia(constrains, success, error) {
    if (navigator.mediaDevices.getUserMedia) {
        //最新標(biāo)準(zhǔn)API
        navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
    } else if (navigator.webkitGetUserMedia) {
        //webkit內(nèi)核瀏覽器
        navigator.webkitGetUserMedia(constrains).then(success).catch(error);
    } else if (navigator.mozGetUserMedia) {
        //Firefox瀏覽器
        navagator.mozGetUserMedia(constrains).then(success).catch(error);
    } else if (navigator.getUserMedia) {
        //舊版API
        navigator.getUserMedia(constrains).then(success).catch(error);
    } else {
        this.scanTip="你的瀏覽器不支持訪問用戶媒體設(shè)備"
    }
}

1.3 播放視屏

獲取設(shè)備方法有兩個(gè)回調(diào)函數(shù)，一個(gè)是成功，一個(gè)是失敗。成功了就開始播放視頻，播放視屏其實(shí)就是給video設(shè)置一個(gè)url，并調(diào)用play方法，這里設(shè)置url要考慮不同瀏覽器兼容性，代碼如下：

success(stream) {
    this.streamIns=stream
    // 設(shè)置播放地址，webkit內(nèi)核瀏覽器
    this.URL=window.URL || window.webkitURL
    if ("srcObject" in this.$refs.refVideo) {
        this.$refs.refVideo.srcObject=stream
    } else {
        this.$refs.refVideo.src=this.URL.createObjectURL(stream)
    }
    this.$refs.refVideo.onloadedmetadata=e=> {
        // 播放視頻
        this.$refs.refVideo.play()
        this.initTracker()
    }
},
error(e) {
    this.scanTip="訪問用戶媒體失敗" + e.name + "," + e.message
}

注意：

播放視屏方法最好寫在onloadmetadata回調(diào)函數(shù)中，否則可能會(huì)報(bào)錯(cuò)。
播放視頻的時(shí)候出于安全性考慮，必須在本地環(huán)境中測(cè)試，也就是http://localhost/xxxx中測(cè)試，或者帶有https://xxxxx環(huán)境中測(cè)試，不然的話或有跨域問題。
下面用到的initTracker()方法也好放在這個(gè)onloadedmetadata回調(diào)函數(shù)里，不然也會(huì)報(bào)錯(cuò)。

2. 捕捉人臉

2.1 使用tracking.js捕捉人臉

視屏在video中播放成功之后就開始識(shí)別人臉了，這里使用到一個(gè)第三方的功能tracking.js，是國(guó)外的大神寫的JavaScript圖像識(shí)別插件。關(guān)鍵代碼如下：

// 人臉捕捉
initTracker() {
    this.context=this.$refs.refCanvas.getContext("2d")    // 畫布
    this.tracker=new tracking.ObjectTracker(['face'])     // tracker實(shí)例
    this.tracker.setStepSize(1.7)                           // 設(shè)置步長(zhǎng)
    this.tracker.on('track', this.handleTracked)            // 綁定監(jiān)聽方法
    try {
        tracking.track('#video', this.tracker)      // 開始追蹤
    } catch (e) {
        this.scanTip="訪問用戶媒體失敗，請(qǐng)重試"
    }
}

捕獲到人臉之后，可以在頁面上用一個(gè)小方框標(biāo)注出來，這樣有點(diǎn)交互效果。

// 追蹤事件
handleTracked(e) {
    if (e.data.length===0) {
        this.scanTip='未檢測(cè)到人臉'
    } else {
        if (!this.tipFlag) {
            this.scanTip='檢測(cè)成功，正在拍照，請(qǐng)保持不動(dòng)2秒'
        }
        // 1秒后拍照，僅拍一次
        if (!this.flag) {
            this.scanTip='拍照中...'
            this.flag=true
            this.removePhotoID=setTimeout(()=> {
                this.tackPhoto()
                this.tipFlag=true
            }, 2000)
        }
        e.data.forEach(this.plot)
    }
}

在頁面中畫一些方框，標(biāo)識(shí)出人臉：

<div class="rect" v-for="item in profile"
             :style="{ width: item.width + 'px', height: item.height + 'px', left: item.left + 'px', top: item.top + 'px'}"></div>

// 繪制跟蹤框
plot({x, y, width: w, height: h}) {
    // 創(chuàng)建框?qū)ο?
    this.profile.push({ width: w, height: h, left: x, top: y })
}

2.2 拍照

拍照，就是使用video作為圖片源，在canvas中保存一張圖片下來，注意這里使用toDataURL方法的時(shí)候可以設(shè)置第二個(gè)參數(shù)quality，從0到1，0表示圖片比較粗糙，但是文件比較小，1表示品質(zhì)最好。

// 拍照
tackPhoto() {
    this.context.drawImage(this.$refs.refVideo, 0, 0, this.screenSize.width, this.screenSize.height)
    // 保存為base64格式
    this.imgUrl=this.saveAsPNG(this.$refs.refCanvas)
    // this.compare(imgUrl)
    this.close()
},
// Base64轉(zhuǎn)文件
getBlobBydataURI(dataURI, type) {
    var binary=window.atob(dataURI.split(',')[1]);
    var array=[];
    for(var i=0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {
        type: type
    });
},
// 保存為png,base64格式圖片
saveAsPNG(c) {
    return c.toDataURL('image/png', 0.3)
}

拍照完成之后就可以把文件發(fā)送給后端，讓后端進(jìn)行對(duì)比驗(yàn)證，這里后端使用的是阿里云的接口。

3. 最后效果

3.1 參考代碼demo

最后，demo我已經(jīng)放在github上了，感興趣可以打開看一下。

效果如下：

3.2 在項(xiàng)目中落地

最后放在項(xiàng)目中，無非就是最后一個(gè)步驟，去調(diào)用接口比對(duì)，根據(jù)比對(duì)結(jié)果成功是成功還是失敗，決定是人臉支付還是繼續(xù)使用原來的密碼支付，效果如下：

ps：這里人臉比對(duì)失敗了，是因?yàn)槲規(guī)е谡郑筒贿谘缆赌樍恕?/p>

作者：Tyler Ning 出處：http://www.cnblogs.com/tylerdonet/ 本文版權(quán)歸作者和博客園共有，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，如有問題，可以通過以下郵箱地址344805262@qq.com 聯(lián)系我，非常感謝。

TML5為了更好地處理今天的互聯(lián)網(wǎng)應(yīng)用，添加了很多新元素及功能，比如：圖形的繪制，多媒體內(nèi)容，更好的頁面結(jié)構(gòu)，更好的形式處理，和幾個(gè)api拖放元素，定位，包括網(wǎng)頁應(yīng)用程序緩存，存儲(chǔ)，網(wǎng)絡(luò)工作者等。

HTML5的<canvas>標(biāo)簽可以定義圖形，比如圖表和其他圖像。該標(biāo)簽是基于 JavaScript 的繪圖 API。

如想完成這樣一個(gè)任務(wù)，畫一個(gè)包含時(shí)間軸的世界歷史年表，如下圖所示：

要完成上述任務(wù)，便可以使用HTML5+CSS+JS，代碼如下：

<!DOCTYPE html>
<html><title>historyTidePrev</title>
<style type="text/css">
.left{/*total 974,豎線起始位置：436px*/
width:350px;
float:left;
padding-left:56px;
padding-right:30px;
}
.right{/*豎線起始位置：436px*/
width:500px;
float:left;
padding-left:38px;
}
p{
line-height:16px;
margin:0;
padding:0;
text-indent:-2em;
}
</style>

<script>
function scrol...(){
var scl=document.body.scrollHeight/2+30*14;
window.scrollBy(0,scl);
}
</script>

<canvas id="myCanvas2" width="974" height="29418" style="border:0px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
var canvasW=974;
var dingJiange=18; //頂端間隔豎線起始位置(Y軸）
var diJiange=0; //底部間隔豎線起始位置(Y軸）
var jianGe=dingJiange+diJiange;
var Xcor=436; //豎線X坐標(biāo)的起始位置；
//因最小的字體需要12它，所以下面的定位需要達(dá)到12；
var nianPX=14; //一年間隔使用的像素；
var nianYprev=2100; //公元前有多少年開始
var nianYnex=0;//公元前后多少年結(jié)束
var nianYprevPx=nianYprev*nianPX; //公元前有多少年及像素；
var nianYnexPx=nianYnex*nianPX; //公元后有多少年及像素；
var Ycor=nianYprevPx+nianYnexPx; //豎線Y坐標(biāo)的終點(diǎn)位置（長(zhǎng)度）；
var nianL=8; //年線段的長(zhǎng)度；
var nianL10=20; //10年線段的長(zhǎng)度；
var nianL100=30; //100年線段的長(zhǎng)度；
var fontsi=nianPX*3;//字體大小
var fontsi10=nianPX*4;
var fontsi100=nianPX*5;

//長(zhǎng)豎線
ctx.beginPath();
ctx.moveTo(Xcor,dingJiange);
ctx.lineTo(Xcor,Ycor+diJiange);
ctx.stroke();

//年橫線
for(i=dingJiange;i<=Ycor+diJiange;i+=nianPX){
ctx.beginPath();
ctx.moveTo(Xcor,i);
ctx.lineTo(Xcor-nianL,i);
ctx.strokeStyle="rgba(0, 0, 0, 0.4)";
ctx.stroke();
}

//5年橫線
for(i=dingJiange;i<=Ycor+jianGe;i+=nianPX*5){
ctx.beginPath();
ctx.moveTo(Xcor,i);
ctx.lineTo(Xcor-nianL*1.5,i);
ctx.strokeStyle="rgba(0, 0, 0, 0.6)";
ctx.stroke();
}

//10年橫線和文本
for(i=dingJiange;i<=Ycor+jianGe;i+=nianPX*10){
ctx.beginPath();
ctx.moveTo(Xcor,i);
ctx.lineTo(Xcor-nianL*2,i);
ctx.strokeStyle="rgba(0, 0, 0, 0.8)";
ctx.stroke();
ctx.textAlign="right";
var varmid=(i-dingJiange)/nianPX;
if(varmid%100!=0){
ctx.font="12px 宋體"; //30px 可以寫在里面
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.fillStyle=gradient;
ctx.fillText((i-dingJiange)/nianPX-nianYprev,Xcor-nianL*2,i+6);
}
}

//100年橫線和文本
for(i=dingJiange;i<=Ycor+jianGe;i+=nianPX*100){
ctx.beginPath();
ctx.moveTo(Xcor,i);
ctx.lineTo(Xcor-nianL*3,i);
ctx.strokeStyle="rgba(0, 0, 0, 0.9)";
ctx.stroke();
ctx.textAlign="right";
ctx.font="18px 宋體"; //30px 可以寫在里面
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.strokeStyle=gradient;
ctx.strokeText((i-dingJiange)/nianPX-nianYprev,Xcor-nianL*3,i+8);
}

function txtL(year0,txt){
var xc=Xcor-nianL-65; //左邊的線條從右邊開始到左邊結(jié)束的位置；
var xc2=10;//左邊文本從左邊開始的位置；
var yp;
if(year0>=0){
yp=dingJiange+nianYprevPx+year0*nianPX;
txt="" + year0 + "年," + txt;
}else{
yp=dingJiange+nianYprevPx+year0*nianPX;
yearp=year0*(-1);
txt="前" + yearp + "年," + txt;
}
ctx.fillStyle="#00f";
ctx.beginPath();
ctx.moveTo(Xcor-60,yp);
ctx.lineTo(xc+xc2-25,yp);
ctx.stroke();
ctx.font="12px Verdana";
ctx.fillStyle="#000";
ctx.textAlign="left";
//xc的位置是xc=Xcor+nianL100＝974－436－30＝508，可以容納46個(gè)12px的字符(44*12=535)；
var txtN;//右邊屏幕可容納字符串個(gè)數(shù)；
var txtW=12*1;//手工算出是0.945;txtW是一個(gè)字符串的寬度；
txtN=Math.floor(xc/txtW);
if(txt.length>txtN){
var fortime=Math.ceil(txt.length/txtN);//需要循環(huán)的次數(shù)；
ctx.fillText(txt.substring(0,txtN),xc2,yp);
for(i=0;i<fortime;i++){
yp=yp+14;
txt=txt.substring(txtN);
var txt2=" "+txt.substring(0,txtN);
ctx.fillText(txt2,xc2,yp);
}
}else{
ctx.fillText(txt,xc2,yp);
}
}

function txtR(year0,txt){
var xc=Xcor+nianL100;
var yp;
if(year0>=0){
yp=dingJiange+nianYprevPx+year0*nianPX;
txt="" + year0 + "年，" + txt;
}else{
yp=dingJiange+nianYprevPx+year0*nianPX;
yearp=year0*(-1);
txt="前" + yearp + "年，" + txt;
}
ctx.fillStyle="#00f";
ctx.beginPath();
ctx.moveTo(Xcor+3,yp);
ctx.lineTo(xc,yp);
ctx.stroke();
ctx.font="12px Verdana";
ctx.fillStyle="#000";
ctx.textAlign="left";
//xc的位置是xc=Xcor+nianL100＝974－436－30＝508，可以容納46個(gè)12px的字符(44*12=535)；
var txtN;//右邊屏幕可容納字符串個(gè)數(shù)；
var txtW=12*1;//手工算出是0.945;txtW是一個(gè)字符串的寬度；
txtN=Math.floor((canvasW-xc)/txtW);
if(txt.length>txtN){
var fortime=Math.ceil(txt.length/txtN);//需要循環(huán)的次數(shù)；
ctx.fillText(txt.substring(0,txtN-4),xc,yp);
for(i=0;i<fortime;i++){
yp=yp+14;
txt=txt.substring(txtN-4);
var txt2=" "+txt.substring(0,txtN-4);
ctx.fillText(txt2,xc,yp);
}
}else{
ctx.fillText(txt,xc,yp);
}
}
txtR(-580,"畢達(dá)哥拉斯(約-580～-500年)古希臘數(shù)學(xué)家、哲學(xué)家創(chuàng)立畢達(dá)哥拉斯學(xué)派，提出畢達(dá)哥拉斯定理、數(shù)和諧說和靈魂輪回說。");
txtR(-563,"釋迦牟尼約-563～前483年佛教創(chuàng)始人建立了完整的佛教教義學(xué)說。");
txtL(-551,"孔子-551.9.28--479.4.11，春秋時(shí)期魯國(guó)人.");
txtR(-552,"孫武齊國(guó)樂安人,漢族.公元前527年，年僅25歲的孫武完成曠世圣書——《孫子兵法》。");
txtR(-427,"公元前427～前348／347)年古希臘哲學(xué)家柏拉圖創(chuàng)立“學(xué)園派”，建立以“理念論”為核心的客觀唯心主義哲學(xué)體系。");
txtR(-384,"前4世紀(jì)，希臘亞里士多德(公元前384年-公元前322年)對(duì)數(shù)學(xué)、動(dòng)物學(xué)等進(jìn)行綜合研究。");

txtR(-0,"");
txtR(-0,"");
</script>
</body>
</html>

在線咨詢

上一篇：css 水平居中的幾種實(shí)現(xiàn)方式
下一篇：學(xué)漢字，異讀音：「yì」

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商