H5调用手机摄像头，实时拍照上传（旧）

草巾冒小子

已于 2025-03-31 22:14:41 修改

阅读量3.9w

点赞数 4

分类专栏： CSS 3 文章标签：前端框架

于 2018-07-05 16:55:11 首次发布

本文为优快云博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.youkuaiyun.com/qq_35393869/article/details/80924677

版权

H5调用手机摄像头，完成拍照，实时上传（旧）

项目开发中，偶尔会遇到网页中调用手机摄像头，通过相册选择或直接实时拍照的方式，完成图片上传的功能型需求。

今天，就通过一个小的案例，演示一下完整的实现流程【效果截图省略】。
仅供参考，代码年限久远，请联系博主获取最新资源。

案例全部代码，示下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="statics/css/udy_css/mui.min.css">
	<link rel="stylesheet" href="statics/css/udy_css/change_info.css">
	<title>修改资料</title>
	<!--[if lte IE 8]>
		<script type="text/javascript">alert("您的浏览器版本较低，请升级版本以获得更好的体验！");</script>
	<![endif]-->
	<style>
		body{
     line-height: 0;}img{
     border: none;}
		.mui-input-group .mui-input-row.bd0:after{
     height: 0;}
		.mui-input-group .mui-input-row.bd0{
     border-bottom: #c8c7cc 1px solid;}
		.mui-card{
     position: relative;border:#c8c7cc 1px dotted;padding: 8px;-webkit-box-shadow:none;box-shadow: none;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin-bottom: 30px;}
		/*图片背景*/
		.mui-card-header:after{
     height: 0;}
		.camerabox{
     width: 100%;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
		.beforecamera{
     padding: 0;margin:0;margin-top: 20px;border:none;}
		.beforecamera .mui-card-header{
     width:100%;text-align: center;}
		.beforecamera .mui-card-header>div{
     width: 100%;

最低0.47元/天解锁文章