标题为近来碰到的一个现实请求，题目很简单，做起来挺省心辛苦。由于兼容性及潜伏题目，如今纯真做到desktop chrome only。参考资料多见于 http://www.html5rocks.com/zh/tutorials/，可自行搜刮相干内容。
若排版乱掉，查阅https://www.zybuluo.com/bornkiller/note/7064即可。
HTML重要部份以下
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-6">
<video id="source" width="100%" height="480" autoplay></video>
<button id="snapTrigger">Snap Photo</button>
<button id="uploadTrigger">Upload Photo</button>
</div>
<div class="col-md-6 col-lg-6">
<canvas id="snapshot" width="600" height="460"></canvas>
</div>
</div>
</div>
浏览器挪用摄像头照相
浏览器挪用摄像头须要全新的BOM对象，navigat.webkitGetUserMedia，经由过程此接口，能够挪用摄像头和麦克风，挪用时须要用户受权方可开启。
- 摄像头画面及时显现
var video = document.querySelector('#source');
var sourceConfig = { "video" : true };
if(navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(sourceConfig, function(stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, defaultErrHandle);
}
挪用很简单，将摄像头捕捉的二进制流转换为DomString，再用video节点援用即可，详细接口可自行查询。
- 截图
var canvas = document.querySelector('#snapshot');
var context = canvas.getContext('2d');
var snapTrigger = document.querySelector('#snapTrigger');
snapTrigger.addEventListener('click',function(e){
context.drawImage(video, 0, 0 ,600,480);
})
用canvas画布绘制当前帧的像素信息。
二进制文件转换
前两步顺分顺水，到这一步的时刻涌现第一次近乎无望的心境，当JAVASCRIPT一脚踩入二进制的天下，FE的天下观被震动到。
- Canvas —-> Blob
Canvas有一个保留当前画布的要领canvas.toDataURL('image/jpeg')，返回值是一个data-url shema，通用花样为data:mimeType,base64,encodeString，但现实须要的是二进制对象，所以须要转换，从data-url到blob对象，我终究也没有搞邃晓Base64 及相干的编码/解码题目，只是获得了转换的函数。函数内部涉及到两个很少用到的对象和一个全局要领，uInt8Array，Blob和window.atob()要领，有兴致的自行google。。
function canvasToBlob(dataURL){
var BASE64_MARKER = ';base64,';
var parts = dataURL.split(BASE64_MARKER);
var contentType = parts[0].split(':')[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: 'imgag/jpeg'});
}
该要领参数为data-url shema，返回值为一个规范 blob 对象。
要领参考了Github.com上封装html5 Filesystem接口开源项目，地点：https://github.com/ebidel/filer.js。
Dropbox用户受权
照相猎取二进制对象以后，就须要上传到dropbox，觉得上并不难，dropbox支撑HTTP挪用，但本身尝试以失利了结，只能经由过程官方引荐SDK来完成，该SDK功用很壮大，但我用到的功用有限。dropbox.js 地点：https://github.com/dropbox/dropbox-js。
- 猎取受权。
var client = new Dropbox.Client({ key: "2oj96m9cxc6psdf" });
client.authenticate(function(error, client) {
if (error) {
defaultErrHandle(error);
}
});
- 上传图片
function uploadFile(){
var tmp = canvasToBlob(canvas.toDataURL('image/jpeg'));
if(client.isAuthenticated()){
client.writeFile("profile.jpg", tmp , function(error, stat) {
if (error) {
defaultErrHandle(error); // Something went wrong.
}
});
}
}
经由过程SDK，能够很便利的上传任何内容，client.writeFile()要领支撑string,File,Blob,ArrayBuffer.
- 个人原生代码尝试
dropbox的受权有implict grant体式格局，所以一个重定向基本上就能够拿到access_token，谈谈文件上传部份，代码以下：
function uploadFile(){
var tmp = canvasToBlob(canvas.toDataURL('image/jpeg'));
var xhr = new XMLHttpRequest();
var data = new FormData();
data.append('profile',tmp,'profile');
xhr.open('POST',
'https://api-content.dropbox.com/1/files/dropbox/',
true);
xhr.setRequestHeader('Authorization','Bearer ' + window.localStorage.getItem('access_token'));
xhr.send(data);
}
理论上没有题目，但现实上一直在给我返回400 Bad request，多方查阅没法处置惩罚，遂只能摒弃。
编码有感
- 末了编码以失利了结，心境比较烦闷，勤奋有时刻并不能获得报答。
- 全新的HTML5跟当代浏览器的支撑，已能做到几年前FE基础不敢设想的事变，
FileSystem,FileReader,Websocket,Worker,UserMedia,localstorage,Canvas,WebGL,XHR Level2，然则这么多特征现实运用的并非许多，运用场景确实是个产物司理角度动身的考量，浏览器规范支撑的滞后性也须要支付更多的进修本钱和布置本钱。 - 前端框架屡见不鲜，正在运用的
Angularjs个人给32个赞，历久弥坚的backbone用户基数不小，新晋的Ember.js等一众正在吸收世人眼光。我只用过Angularjs，个人觉得这是个疾速兴起的框架，难度是我唯一想吐槽的点，编码习气的转换速率决议了进修运用这个框架的难度，越早摒弃直接操纵DOM的编码体式格局，越快能接收这个框架。假如用了Angularjs，意味着背景是个地道的Restful API，在已选用了这套框架以后，我是坚定阻挡再引入背景模板引擎，比如说Jade。 - 后端Nodejs强势回归，前后端言语一致意味着前端工程师须要负担更多的开辟职责。前端工程师能够做做页面，处置惩罚交互，背景工程师用模板引擎划定规矩重写，然后服务器端衬着输出终究页。而如今的职责能够须要划到数据库查询这一层。
- 对前端工程师来讲，最坏的时期，也是最好的时期。
