js从摄像头获取照片并裁剪上传用户图像效果代码-html代码-BFW代码库

代码语言：html

所属分类：上传

代码描述：js从摄像头获取照片并裁剪上传用户图像效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>浏览器摄像头拍照并裁剪上传</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			
			button {
				outline: none;
				border: none;
			}
			
			.flex-row-wrap {
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
			}
			
			.flex-center {
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.main {
				width: 1000px;
				margin: 100px auto;
			}
			
			.main__camera,
			.main__upload {
				height: 530px;
				background: #FFFFFF;
				box-shadow: 4px 4px 18px 0px rgba(0, 0, 0, 0.08);
				border-radius: 18px;
				padding: 20px;
				text-align: center;
			}
			
			.main__camera {
				width: 358px;
				margin-right: 20px;
			}
			
			.main__upload {
				width: 538px;
			}
			
			.main__camera-power {
				width: 288px;
				height: 160px;
				background: rgba(41, 123, 255, 0.06);
				border-radius: 18px;
				border: 1px dashed #297BFF;
				cursor: pointer;
				flex-flow: column nowrap;
			}
			
			.main__camera-confirm {
				width: 288px;
				height: 48px;
				background: #297BFF;
				border-radius: 14px;
				transition: .3s;
				cursor: pointer;
				margin: auto;
				margin-top: 30px;
			}
			
			.main__camera-confirm--img {
				display: block;
				width: 34px;
				height: 34px;
			}
			
			.main__title {
				font-size: 20px;
				font-weight: 500;
				color: #333333;
			}
			
			.main__hint {
				font-size: 13px;
				color: #333333;
				line-height: 18px;
				margin-top: 8px;
				margin-bottom: 20px;
			}
			
			.main__camera-power--hint {
				font-size: 13px;
				font-weight: 400;
				color: #297BFF;
				margin-top: 10px;
			}
			
			.main__camera-power--span {
				width: 48px;
				height: 48px;
			}
			
			.main__camera-power--span img {
				width: inherit;
				height: inherit;
				display: block;
			}
			
			.main__upload-left--top {
				height: 288px;
			}
			
			.main__upload-btn--img {
				width: 28px;
				height: 28px;
				display: block;
			}
			
			.main__upload-left {
				width: 288px;
				height: 288px;
				position: relative;
				margin-right: 30px;
				border: 1px dashed #297BFF;
				background: #fff;
				border-radius: 18px;
				background-repeat: no-repeat;
				cursor: move;
				overflow: hidden;
			}
			
			.main__upload-left--thumbBox {
				width: 144px;
				height: 144px;
				border-radius: 144px;
				transform: translate(-50%, -50%);
				border: 1px solid rgb(102, 102, 102);
				background: none repeat scroll 0% 0% transparent;
				box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
				position: absolute;
				top: 50%;
				left: 50%;
			}
			
			.main__upload-left--spinner {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				text-align: center;
				font-size: 12px;
				line-height: 288px;
				color: #4A4a4a;
				background: rgba(213, 211, 211, 0.7);
			}
			
			.main__upload-right {
				width: 140px;
				height: 288px;
				display: flex;
				align-items: center;
				flex-flow: column;
				font-size: 12px;
				justify-content: center;
			}
			
			.main__upload-btn {
				width: 48px;
				height: 48px;
				background: #297BFF;
				border-radius: 14px;
				cursor: pointer;
				color: #FFFFFF;
				transition: .3s;
			}
			
			.main__upload-btn:hover,
			.main__camera-confirm:hover {
				opacity: .7;
			}
			
			.main__upload-btn--confirm {
				width: 172px;
				background: #FFA929;
				display: none;
			}
			
			.main__upload-btn--color {
				width: 168px;
				background-color: #FFA929;
			}
			
			.main__upload-left--btn {
				margin-top: 30px;
			}
			
			.main__upload-left--btn > button + button {
				margin-left: 10px;
			}
			
			.main__lager-photo,
			.main__small-photo,
			.main__mini-photo {
				width: 76px; 
				height: 76px;
				border-radius: 50%;
				box-shadow: 0px 0px 12px #7E7E7E;
				display: block;
			}
			
			.main__small-photo {
				width: 58px;
				height: 58px;
				margin-top: 10px;
			}
			
			.main__mini-photo {
				width: 46px;
				height: 46px;
				margin-top: 10px;
			}
		
		</style>
	</head>
	<body>
		<main class="main flex-row-wrap">
			<section class="main__camera">
				<h2 class="main__title">从本地摄像头获取</h2>
				<p class="main__hint">请确保当前设备的摄像头处于可用状态</p>

				<div id="open-power" class="main__camera-power flex-center">
					<span class="main__camera-power--span">
						<img src="//repo.bfw.wiki/bfwrepo/image/60.........完整代码请登录后点击上方下载按钮下载查看