jquery实现支持移动端手机端拍照裁剪图片效果代码-html代码-BFW代码库

jquery实现支持移动端手机端拍照裁剪图片效果代码

代码语言：html

所属分类：上传

代码描述：jquery实现支持移动端手机端拍照裁剪图片效果代码

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

<!DOCTYPE html>

<html lang='en'>

<head>

<meta charset='UTF-8'>

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="keywords" content="">
<meta name="description" content="">

<title>摄像头拍照</title>
<style>
body {
    padding: 10px;
    margin: 0;
    text-align: center;
}
#clipArea {
    margin: 10px;
    user-select: none;
    overflow: hidden;
    position: relative;
    height: 300px;
}
#clipBtn {
    margin-top:10px;
}
#view {
    margin: 0 auto;
    width: 200px;
    height: 200px;
}
.correct:before {
    content: '\2714';
    color: #2121219e;
    float: right;
    font-size: 2rem;

}
.incorrect:before {
    content: '\2716';
    color: #ffffff;
    float: left;
    font-size: 2rem;
}
#image{
    width: 100%;
  
    padding: 5px 0 ;
    background:#0099FF ;
    color: white;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
}
</style>
</head>
<body>
<input type="file" style="display: none" accept="image/*" capture="camera" id="face_file" multiple="multiple" ></input>
<div id="image" >请点击这里拍照</div>
<div id="view"></div>
<div class="cover-wrap" style="position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 10000000; text-align: center; display: none;">
    <div style="width:80%;margin:1% auto;margin-bottom:0px;">
        <span class="status incorrect" id="face"></span>
        <span class="status correct" id="clipBtn"></span>
    </div>
    <div class="" style="width:90%;height:auto;margin:40% auto;background-color:#FFFFFF;overflow: hidden;border-radius:4px;">
        <div id="clipArea"></div>
    </div>  
</div>
<script type="text/javascript&quo.........完整代码请登录后点击上方下载按钮下载查看