HTML5调用本地摄像头画面，拍照，上传服务器

worldligang 发布于2019-08-21 18:25 / 1968人阅读

摘要：图片数据绘制到先构造对象，为，图片之后绘制到的图片文件数据绘制到还是先转换成一个，然后构造对象，为，图片之后绘制到利用上面的函数，由对象得到格式的，再参考图片数据绘制到转换为对象并使用发送转换为对象后，可以使用上传图像文件。

实现功能和适用业务

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

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

实现步骤

调取本地摄像头（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 = function(e) {callback(e.target.result);};
    a.readAsDataURL(blob);
}
//example:
readBlobAsDataURL(blob, function (dataurl){
    console.log(dataurl);
});
readBlobAsDataURL(file, function (dataurl){
    console.log(dataurl);
});

dataURL图片数据绘制到canvas

先构造Image对象，src为dataURL，图片onload之后绘制到canvas

var img = new Image();
img.onload = function(){
    canvas.drawImage(img);
};
img.src = dataurl;

File,Blob的图片文件数据绘制到canvas

还是先转换成一个url，然后构造Image对象，src为dataURL，图片onload之后绘制到canvas

利用上面的 readBlobAsDataURL 函数，由File,Blob对象得到dataURL格式的url，再参考 dataURL图片数据绘制到canvas

readBlobAsDataURL(file, function (dataurl){
    var img = new Image();
    img.onload = function(){
        canvas.drawImage(img);
    };
    img.src = dataurl;
});

Canvas转换为Blob对象并使用Ajax发送

转换为Blob对象后，可以使用Ajax上传图像文件。

先从canvas获取dataurl, 再将dataurl转换为Blob对象

var dataurl = canvas.toDataURL("image/png");
var blob = dataURLtoBlob(dataurl);
//使用ajax发送
var fd = new FormData();
fd.append("image", blob, "image.png");
var xhr = new XMLHttpRequest();
xhr.open("POST", "/server", true);
xhr.send(fd);

Canvas 转换成 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...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90449.html

HTML5调用本地摄像头画面，拍照，上传服务器

摘要：图片数据绘制到先构造对象，为，图片之后绘制到的图片文件数据绘制到还是先转换成一个，然后构造对象，为，图片之后绘制到利用上面的函数，由对象得到格式的，再参考图片数据绘制到转换为对象并使用发送转换为对象后，可以使用上传图像文件。实现功能和适用业务采集本地摄像头获取摄像头画面，拍照保存，上传服务器；前端上传图片处理，展示，缩小，裁剪，上传服务器实现步骤调取本地摄像头（get...

ShevaKuilin 2019-08-01 18:18 评论0 收藏0
浏览器调用摄像头，拍照上传到dropbox

摘要：主要部分如下浏览器调用摄像头拍照浏览器调用摄像头需要全新的对象，，通过此接口，可以调用摄像头和麦克风，调用时需要用户授权方可开启。该方法参数为，返回值为一个标准对象。标题为最近遇到的一个实际要求，题目很简单，做起来挺费心费力。因为兼容性及潜在问题，目前单纯做到desktop chrome only。参考资料多见于 http://www.html5rocks.com/zh/tutori...

learning 2019-08-19 14:38 评论0 收藏0
getUserMedia API及HTML5 调用手机摄像头拍照

摘要：失败回调函数的参数，可能的异常有硬件问题用户拒绝了当前的浏览器实例的访问请求或者用户拒绝了当前会话的访问或者用户在全局范围内拒绝了所有媒体访问请求。 getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体（摄像头、视频、音频、地理位置等）的接口，基于该接口，开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。 getUserM...

xiaokai 2019-08-21 17:21 评论0 收藏0
getUserMedia API及HTML5 调用手机摄像头拍照

摘要：失败回调函数的参数，可能的异常有硬件问题用户拒绝了当前的浏览器实例的访问请求或者用户拒绝了当前会话的访问或者用户在全局范围内拒绝了所有媒体访问请求。 getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体（摄像头、视频、音频、地理位置等）的接口，基于该接口，开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。 getUserM...

李增田 2019-08-01 17:54 评论0 收藏0