利用html5调用本地摄像头拍照上传图片
html5概念啥的就不废话了,不知道的 百度, 谷歌一堆。。今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头,在html5之前,要在浏览器获取本地摄像头只有通过插件(ActiveX,但是这种只有IE支持)或者是flash来获取(或许你没学过flash那就很坑爹了),在之后微软的silvertlight中也可以获取,但这些都比较麻烦,在html5的世界里,要获取本地摄像头,只要配合js就可以轻松获取。。
目前支持html5的浏览器(参考http://www.cnblogs.com/jerry_cong/archive/2011/05/15/2047143.html)
先看看效果。。。(个人测试:使用谷歌Chrome 23.0.1271.97)
看看主要代码吧:
这个是前台HTML的代码。
1 2 3 4 5 |
|
下面这个是主要代码了。(jquery)
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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
|
最后的就是接收经过base64编码之后的图像文件了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
至此B/S通过本地摄像头拍照上传就完成了。HTML5的强大之处,爱不释手了。。。不在像以前需要写一堆烦人的东东了,而且你也可以不用去学flash...
额外说一句,如果您还在用IE6\IE7那您还是别玩html5了...