This repository has been archived by the owner on Jun 17, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
55 lines (52 loc) · 2.74 KB
/
index.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<script type="text/javascript" src="ImageCrop.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
<head>
<body>
<div>
<div class="rel origin ma" id="source"></div>
<div class="prev rel fl"><img class="img abs" id="prevImg" src=""></div>
<div class="area rel fl ml10"><img class="img abs" id="areaImg" src=""></div>
</div>
<script type="text/javascript">
function $(id) {
return document.getElementById(id)
}
var imgCrop = new ImageCrop({
sourceContainer: $('source'), // 必选，图片所在的容器元素
src: 'https://raw.githubusercontent.com/dolymood/ImageCrop2/master/2.jpg', // 必选，图片地址
imgCls: 'img maxImg', // 可选，图片元素img的classname，默认 img
preImg: $('prevImg'), // 可选，预览图片元素，已存在img元素
areaImg: $('areaImg'), // 可选，当前移动框所包含的图片内容
width: 50, // 可选，默认移动框的宽度，默认 100
height: 50, // 可选，默认移动框的高度，默认 100
lockWHScale: true, // 可选，是否锁定宽高比，默认false
defaultCenter: false, // 可选，是否默认出现在中心位置，默认true
top: 10, // 可选，默认出现位置的top值（当defaultCenter为false时有效），默认0
left:10, // 可选，默认出现位置的left值（当defaultCenter为false时有效），默认0
minHeight: 10, // 可选，移动框的最小高度，默认20
minWidth: 10, // 可选，移动框的最小宽度，默认20
minImgWidth: 120, // 可选，预览图片的最小宽度，默认150
minImgHeight: 120, // 可选，预览图片的最小高度，默认150
// 可选，当移动的时候调用
// 移动的概念是指 选择框的大小、位置 发生改变的时候
onMove: function() {
console.log('preInfo::', this.getPreInfo())
console.log('areaInfo::', this.getAreaInfo())
console.log('originInfo::', this.getOriginInfo())
}
});
// var info = imgCrop.getPreInfo(); // 预览图片相关信息
// var info1 = imgCrop.getAreaInfo(); // 移动框所包含的的图片相关信息
// var info2 = imgCrop.getOriginInfo(); // 得到相对于图片原始大小时位置大小信息
//
setTimeout(function() {
//imgCrop.changeImage('https://raw.githubusercontent.com/dolymood/ImageCrop2/master/1.JPG'); // 更改图片
}, 5000)
</script>
</body>
</html>