实现功能和适用业务
采集本地摄像头获取摄像头画面,拍照保存,上传服务器;
前端上传图片处理,展示,缩小,裁剪,上传服务器
实现步骤
调取本地摄像头(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