如何使用HTML5实现拍照上传应用

最新推荐文章于 2021-06-04 10:30:52 发布

蒋宇捷

最新推荐文章于 2021-06-04 10:30:52 发布

阅读量6.6w

点赞数 25

分类专栏：前端应用开发移动开发 Web前端-关注HTML5与CSS3 移动应用开发文章标签： html5 video chrome image opera function

本文链接：https://blog.csdn.net/hfahe/article/details/7354912

版权

本文介绍了如何利用HTML5的Media Capture API和Canvas实现Web App拍照、显示及上传到服务器。通过getUserMedia获取摄像头视频流，结合Video和Canvas元素进行实时捕获，并将Canvas数据转换为base64编码的PNG图像上传到服务器。同时，提到了前端和后端处理图片数据的方法，以及如何使用Ajax进行图片上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在HTML5规范的支持下，WebApp在手机上拍照已经成为可能。在下面，我将讲解Web App如何用手机进行拍照，显示在页面上并上传到服务器。

1、视频流

HTML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签，并将从摄像头获得视频作为这个标签的输入来源（请注意目前仅Chrome和Opera支持getUserMedia。补充：请使用Opera支持HTML5的新版本，如果是Chrome，版本需为Chrome 18.0.1008+，并使用about:flags来开启WebRTC，请看下图）。

<video id="video" autoplay=""></video>
<script>
var video_element = document.getElementById('video');
if (navigator.getUserMedia) { // opera should use opera.getUserMedia now, chrome use webkitGetUserMedia
         navigator.getUserMedia('video',success, error);
}
function success(stream) {

最低0.47元/天解锁文章