html5对摄像头数据进行处理,HTML5调用本地摄像头画面，拍照，上传服务器

实现功能和适用业务

采集本地摄像头获取摄像头画面，拍照保存，上传服务器；

前端上传图片处理，展示，缩小，裁剪，上传服务器

实现步骤

调取本地摄像头(getUserMedia)/上传图片，将图片/视频显示在浏览器上

拍照/转换 将视频拍照或是将图片展示在canvas中

将canvas中的图像，转换成图片格式(png,jpg等)上传到服务器

上述两种方式涉及到的格式转换分别为：

获取摄像头： 摄像头视频流(blob)-> canvas 图像 -> blob 图片 上传服务器

图片上传： 上传的图片(file) -> base64图片 -> canvas 图像 -> blob 图片 上传服务器

具体获取摄像头的方法可以参考：https://segmentfault.com/a/11...

相关的格式转换下：

canvas转换为dataURL (从canvas获取dataURL)

var dataurl = canvas.toDataURL('image/png');

var dataurl2 = canvas.toDataURL('image/jpeg', 0.8);

File对象转换为dataURL、Blob对象转换为dataURL

File对象也是一个Blob对象，二者的处理相同。

function readBlobAsDataURL(blob, callback) {

var a = new FileReader();

a.onload = fun

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！