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

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

原创

最新推荐文章于 2021-06-04 10:30:52 发布 · 6.6w 阅读

49 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #video #chrome #image #opera #function

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

在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) {
         video_element.src =stream;
}
</script>

最低0.47元/天解锁文章