实现功能及适用服务采集本地摄像头获取摄像头画面，拍照，保存，上传到服务器；前端上传图片进行处理，显示，缩小，裁剪，上传到服务器实现调用本地摄像头（getUserMedia）/上传图片，在浏览器上显示图片/视频进行拍照/转换的步骤视频的图片或者在canvas上显示图片将canvas中的图片转换为图片格式（png、jpg等）上传到上面的服务器这两种方式涉及到的格式转换是：获取摄像头：摄像头视频流（blob）->canvas图片->blob图片上传服务器图片上传：上传的图片（文件）->base64图片->canvas图片->blob图片上传服务器获取camera的具体方法可以参考：https://segmentfault.com/a/11...相关格式转换：convertcanvastodataURL（从canvas获取dataURL）vardataurl=canvas.toDataURL('image/png');vardataurl2=canvas.toDataURL('image/jpeg',0.8);File对象转换为dataURL，Blob对象转换为dataURLFile对象也是Blob对象，两者的处理是一样的。functionreadBlobAsDataURL(blob,callback){vara=newFileReader();a.onload=function(e){回调(e.target.result);};a.readAsDataURL(blob);}//示例：readBlobAsDataURL(blob,function(dataurl){console.log(dataurl);});readBlobAsDataURL（文件，函数（dataurl）{console.log（dataurl）；}）；dataURL图像数据绘制到画布上先构造一个Image对象，src为dataURL，onload后图像绘制到画布上varimg=newImage();img.onload=function(){canvas.drawImage(img);};img.src=dataurl;File，Blob的图片文件数据绘制到canvas或者转换先创建一个url，然后构造一个Image对象，src为dataURL，onload后将图片绘制到canvas，使用上面的readBlobAsDataURL函数，获取dataURL中的url从File、Blob对象格式化，然后引用dataURL图像数据绘制到canvas上);};img.src=dataurl;});Canvas转换为Blob对象，转换为Blob对象后使用Ajax发送，图像文件可以使用Ajax上传。先从canvas中获取dataurl，然后将dataurl转为Blob对象vardataurl=canvas.toDataURL('image/png');varblob=dataURLtoBlob(dataurl);//使用ajax发送varfd=newFormData();fd.append("image",blob,"image.png");varxhr=newXMLHttpRequest();xhr.open('POST','/server',true);xhr.send(fd);画布转Blob格式可以通过Canvas.toDataUrl转成DataUrl(base64)，再转成blob。可以直接转成blob，也可以通过canvas.toBlob来转。但是toBlob方法的浏览器兼容性不是很好，存在兼容性问题。好在toblob的方法已经被前辈封装了，可以直接使用。适用于PC端和移动端。地址：https://github.com/qiyubu/Jav...具体过程及相关参考资料：http://www.zhangxinxu.com/wor...http://blog.csdn.net/cuixipin...https://segmentfault.com/a/11…
