-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.html
79 lines (73 loc) · 3.4 KB
/
main.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>慧车宝</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/cropper.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- Content -->
<div class="container">
<div class="row">
<div class="col-md-9">
<!-- <h3 class="page-header">Demo:</h3> -->
<div class="img-container">
<img id="image" src="images/ccc.jpg" alt="Picture">
</div>
</div>
</div>
<div class="row" style="margin-top: -70px;">
<div class="col-md-9 docs-buttons clearfix">
<!-- <h3 class="page-header">Toolbar:</h3> -->
<div class="btn-group">
<button type="button" class="micon fangDa" data-method="zoom" data-option="0.1" title="Zoom In"></button>
<button type="button" class="micon suoXiao" data-method="zoom" data-option="-0.1" title="Zoom Out"></button>
</div>
<div class="btn-group tright fr">
<button type="button" class="micon zuoZhuan" data-method="rotate" data-option="-15" title="Rotate Left"></button>
<button type="button" class="micon youZhuan" data-method="rotate" data-option="15" title="Rotate Right"></button>
<button type="button" class="shadowLeft" ></button>
<button type="button" class="shadowRight" ></button>
</div>
<br />
<div class="btn-group tcenter clearfix">
<button type="button" class="micon chongZhi fl" data-method="reset" title="Reset"></button>
<label class="micon btn-upload shangChuan fl" for="inputImage" title="Upload image file">
<input type="file" class="sr-only" id="inputImage" name="file" accept="image/*">
</label>
<button type="button" class="micon queRen fr" data-method="getCroppedCanvas" data-option="{ "width": 160, "height": 90 }">
确认
</button>
</div>
<!-- Show the cropped image in modal -->
<div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title" id="getCroppedCanvasTitle"></h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<a class="micon" id="download" href="javascript:void(0);" download="cropped.png">确定</a><!--此处的操作应由下载改为上传服务器-->
</div>
</div>
</div>
</div><!-- /.modal -->
</div>
</div>
</div>
<div class="last" style="text-align:center;color: #fff;display: none;">请调整角度后再上传</div>
<!--<div class="consoleTxt" style="text-align:center;color: #fff;">默认信息</div>-->
<!-- Scripts -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/cropper_gai.js"></script>
<script src="js/jiJian.js"></script>
<script src="js/banben.js"></script>
</body>
</html>