-
Notifications
You must be signed in to change notification settings - Fork 1
/
demo.html
83 lines (73 loc) · 2.77 KB
/
demo.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
80
81
82
<!DOCTYPE html>
<html lang="en">
<head>
<title>API Demo | Jcrop Demo</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<style>
#upload{width:0;height:0;overflow:hidden}
</style>
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.Jcrop.js"></script>
<script src="./js/html2canvas.js"></script>
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="css/demos.css" type="text/css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="jc-demo-box">
<div class="page-header">
<h1>API Demo</h1>
</div>
<div class="jcrop-wrapper">
<div id="preview-pane">
<div class="preview-container">
<img src="image/sago.jpg" class="jcrop-preview" alt="Preview" />
</div>
</div>
<div style="margin: .8em 0 .5em;">
<span class="requiresjcrop">
<button id="setSelect" class="btn btn-mini">setSelect</button>
<button id="animateTo" class="btn btn-mini">animateTo</button>
<button id="release" class="btn btn-mini">Release</button>
<button id="disable" class="btn btn-mini">Disable</button>
</span>
<button id="enable" class="btn btn-mini" style="display:none;">Re-Enable</button>
<button id="unhook" class="btn btn-mini">Destroy!</button>
<button id="rehook" class="btn btn-mini" style="display:none;">Attach Jcrop</button>
<button id="upload_button" class="btn btn-mini btn-primary" >上传本地图片</button>
<button id="draw_button" class="btn btn-mini btn-primary" >生成canvas截图上传</button>
<input type="file" id= "upload" />
</div>
<img src="image/sago.jpg" id="target" alt="[Jcrop Example]" />
<fieldset class="optdual requiresjcrop">
<legend>选项 切换</legend>
<div class="optlist offset">
<label><input type="checkbox" id="ar_lock" />Aspect ratio(高宽比)</label>
<label><input type="checkbox" id="size_lock" />minSize/maxSize setting</label>
</div>
<div class="optlist">
<label><input type="checkbox" id="can_click" />Allow new selections</label>
<label><input type="checkbox" id="can_move" />Selection can be moved</label>
<label><input type="checkbox" id="can_size" />Resizable selection</label>
</div>
</fieldset>
<fieldset class="requiresjcrop" style="margin: .5em 0;">
<legend>Change Image</legend>
<div class="btn-group">
<button class="btn" id="img2">Pool</button>
<button class="btn active" id="img1">Sago</button>
<button class="btn" id="img3">Sago w/ outerImage</button>
</div>
</fieldset>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>
</html>