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

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

代码语言：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;
	.........完整代码请登录后点击上方下载按钮下载查看