实现功能和适用业务

  1. 采集本地摄像头获取摄像头画面,拍照保存,上传服务器;
  2. 前端上传图片处理,展示,缩小,裁剪,上传服务器

实现步骤

  1. 调取本地摄像头(getUserMedia)/上传图片,将图片/视频显示在浏览器上
  2. 拍照/转换 将视频拍照或是将图片展示在canvas中
  3. 将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格式

  1. 可以通过 Canvas.toDataUrl 转换成 DataUrl(base64) 再转成 blob
  2. 可以直接转成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...

HTML5调用本地摄像头画面,拍照,上传服务器的更多相关文章

  1. 利用html5调用本地摄像头拍照上传图片[转]

    利用html5调用本地摄像头拍照上传图片   html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头, ...

  2. html5调用手机相机并压缩、上传

    近日刚做的一个功能,要在app里使用内嵌页面进行图像的上传.从功能上看,原生的实现应该是最好的.毕竟页面上所有的东西都隔着一个浏览器,所有的实现都要依赖浏览器提供的接口,不同的浏览器对接口的实现又有差 ...

  3. Ionic Cordova 调用原生 Api 实现拍照上传 图片到服务器功能

    Ionic 调用 Device 设备 Api 获取手机的设备信息 1. 找到对应的Api: https://ionicframework.com/docs/native/device/ 2. 安装相关 ...

  4. 前端调用本地摄像头实现拍照(vue)

    由于调用摄像头有使用权限,只能在本地运行,线上需用https域名才可以使用. <template> <div class="camera_outer"> & ...

  5. H5 调用本地相机并压缩上传(是从angular的ionic项目中截取的)

    html部分 <div class="list_upload item bg_white"> <div class="itemImg pic_uploa ...

  6. Android将应用程序的崩溃信息如何保存到本地文件,并上传服务器

    导语:最近实在是太忙了,没有怎么更新公众号,也没有怎么认真去写一些内容,在这里先给关注我的朋友说一声抱歉,可能在接下来的一段时间,还是很忙,但是我会争取抽空多分享一下技术文章,给大家看,共同进步,也希 ...

  7. 利用html5调用本地摄像头拍照上传图片

    这个是前台HTML的代码. <div id="contentHolder"> <video id="video" width="32 ...

  8. 导出HTML5 Canvas图片并上传服务器功能

    这篇文章主要介绍了导出HTML5 Canvas图片并上传服务器功能,文中通过实例代码给大家介绍了HTML5 Canvas转化成图片后上传服务器,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友 ...

  9. html5调用手机摄像头,实现拍照上传功能

    今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...

随机推荐

  1. C#进阶之WebAPI(三)

    今天复习一下WebAPI的路由知识: 首先分析一下MVC路由和WebAPI路由的区别: 在mvc里,默认的路由机制是通过URL路径去匹配控制器和Action方法的,在mvc中的默认路由定义在App_S ...

  2. CPU vector operations

    CPU vector operations 原文:https://blog.csdn.net/wangeen/article/details/8602028 vector operations 是现代 ...

  3. C++通用框架和库

    C++通用框架和库 来源 https://www.cnblogs.com/skyus/articles/8524408.html 关于 C++ 框架.库和资源的一些汇总列表,内容包括:标准库.Web应 ...

  4. 关于SpringMVC拦截器和异常

    一.文件上传 1.文件上传 SpringMVC为文件上传提供了直接的支持,这种类型是通过即插即用的MultipartResolver技术的.Spring用Jakarta Commons FileUpl ...

  5. 关于spring中事务管理的几件小事

    1.Spring中的事务管理 作为企业级应用程序框架,Spring在不同的事务管理API之上定义了一个抽象层.而应用程序开发人员不必了解底层的事务管理API,就可以使用Spring的事务管理机制. S ...

  6. c++容易混淆知识点

    C ++令人困惑的知识点1 函数传递指针和传递引用之间的区别? 1 GT;指针定义可能未初始化,但引用不可能; 2 - ;引用只能与一个实体组合,指针可以与多个实体组合; 3 GT;加法和减法的含义是 ...

  7. python 删除特定字符所在行

    #查询文件中含有特殊字符串的行 #!/usr/bin/python # -*- coding:utf- -*- import re file1 = open('test.txt','r+') istx ...

  8. IntelliJ IDEA安装及破解

    百度搜索IntelliJ IDEA,进入官网. 下载完成后进入安装界面 根据自己的情况选择安装路径 等待下载和安装完成. 安装完成 接下来我们运行IntelliJ IDEA 之后这里就要我们进行激活了 ...

  9. class文件与dex文件解析

    关于Android的热修复与插件化技术在如今基本上已经成为了“时髦技术”的标配了,或者说用来进行“炫技”的一种方式,毕境如今Android已经发展得非常之成熟了,基本上APP用的到东东都差不多,除了业 ...

  10. kotlin语言boolean

    其实大部分语言的boolean都差不多,为了突出基础的重要性这里还是学习一下,光语法来说没啥可学的,看一眼就会了,这里以解决实际问题来实践下boolean,下面以小学.初中.高中的数学填空题做为练习的 ...