X Tutup
Skip to content

Commit f6213ba

Browse files
DarylxyxDarylxyx
committed
update
1 parent 2da5d78 commit f6213ba

File tree

10 files changed

+313
-185
lines changed

10 files changed

+313
-185
lines changed

‎cutter/cutter/cutter.js‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
;(function(window, document, undefined) {
2+
'use strict';
3+
4+
function Cutter(ele, opts) {
5+
this.ele = ele;
6+
this.defaults = {
7+
conWidth: ele.offsetWidth,
8+
conHeight: ele.offsetHeight,
9+
speed: 2
10+
};
11+
this.opts = this._extend({}, this.defaults, opts);
12+
this.cutData = {};
13+
14+
this._init();
15+
}
16+
17+
Cutter.prototype = {
18+
_init: function() {
19+
var img = new Image(),
20+
hammer = new Hammer(this.ele),
21+
_this = this;
22+
23+
img.src = this.opts.imgUrl;
24+
img.id = 'cutImgObj';
25+
26+
img.onload = function() {
27+
28+
var imgWidth = img.width,
29+
imgHeight = img.height,
30+
imgRate = imgWidth / imgHeight,
31+
conRate = _this.opts.conWidth / _this.opts.conHeight;
32+
33+
if (imgRate > conRate) { //宽型
34+
35+
var imgCurrentHeight = _this.opts.conHeight,
36+
imgCurrentWidth = imgCurrentHeight * imgRate,
37+
maxOffset = _this.opts.conWidth - imgCurrentWidth;
38+
39+
img.setAttribute('width', 'auto');
40+
img.setAttribute('height', _this.opts.conHeight);
41+
42+
hammer.on('pan', function(e) {
43+
var current = img.style.transform ? img.style.transform.split('(')[1].split('px')[0] : 0,
44+
move = Number(current) + (e.deltaX * (_this.opts.speed/10));
45+
46+
if (move >= 0 || move <= maxOffset) {
47+
return;
48+
}
49+
50+
img.style.transform = 'translateX('+move+'px)';
51+
52+
_this.cutData.moveX = Math.abs(move);
53+
_this.cutData.moveY = 0;
54+
});
55+
56+
} else { //高型
57+
58+
var imgCurrentWidth = _this.opts.conWidth,
59+
imgCurrentHeight = imgCurrentWidth / imgRate,
60+
maxOffset = _this.opts.conHeight - imgCurrentHeight;
61+
62+
img.setAttribute('width', '100%');
63+
64+
hammer.get('pan').set({
65+
direction: Hammer.DIRECTION_VERTICAL
66+
});
67+
hammer.on('pan', function(e) {
68+
var current = img.style.transform ? img.style.transform.split('(')[1].split('px')[0] : 0,
69+
move = Number(current) + (e.deltaY * (_this.opts.speed/10));
70+
71+
if (move >= 0 || move <= maxOffset) {
72+
return;
73+
}
74+
75+
img.style.transform = 'translateY('+move+'px)';
76+
77+
_this.cutData.moveX = 0;
78+
_this.cutData.moveY = Math.abs(move);
79+
});
80+
}
81+
82+
_this.cutData.scaleRate = imgCurrentWidth / imgWidth;
83+
84+
_this.ele.appendChild(img);
85+
86+
_this.opts.callback && _this.opts.callback();
87+
}
88+
89+
},
90+
91+
cut: function() {
92+
var canvas = document.createElement('canvas'),
93+
img = document.querySelector('#cutImgObj'),
94+
data = this.cutData,
95+
cutWidth = this.opts.conWidth / data.scaleRate,
96+
cutHeight = this.opts.conHeight / data.scaleRate;
97+
98+
canvas.width = cutWidth;
99+
canvas.height = cutHeight;
100+
canvas.getContext('2d').drawImage(img, data.moveX/data.scaleRate, data.moveY/data.scaleRate, cutWidth, cutHeight, 0, 0, cutWidth, cutHeight);
101+
102+
return canvas.toDataURL('image/png');
103+
},
104+
105+
_extend: function() {
106+
var args = Array.prototype.slice.call(arguments),
107+
len = args.length,
108+
obj = null, i;
109+
110+
for (i = 0; i < len; i ++) {
111+
if (typeof(args[i]) !== 'object') {
112+
break;
113+
}
114+
if (i !== 0) {
115+
for (var o in args[i]) {
116+
if (args[i].hasOwnProperty(o)) obj[o] = args[i][o];
117+
}
118+
} else {
119+
obj = args[0];
120+
}
121+
}
122+
123+
return obj;
124+
}
125+
}
126+
127+
window.Cutter = Cutter;
128+
129+
})(window, document);
130+
131+
if (typeof module !== 'undefined') {
132+
module.exports = window.Cutter;
133+
} else if (typeof define === 'function' && define.amd) {
134+
define([], function () {
135+
'use strict';
136+
return window.Cutter;
137+
});
138+
}

‎cutter/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<html>
2+
<head>
3+
<meta http-equiv="pragma" content="no-cache">
4+
<meta http-equiv="Cache-Control " content="no-cache,must-revalidate">
5+
<meta name="description" content="">
6+
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
7+
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
8+
<title>Drag&Cut</title>
9+
<link rel="stylesheet" href="./src/style.css">
10+
</head>
11+
<body>
12+
<div class="container">
13+
<div class="page page-root">
14+
<input id="files" type="file"/>
15+
<label for="files">
16+
<p class="choose">Choose Image</p>
17+
</label>
18+
</div>
19+
<div class="page page-choose">
20+
<div class="pic-area"></div>
21+
<p class="submit-btn">Complete</p>
22+
</div>
23+
<div class="page page-result">
24+
<div class="show-area"></div>
25+
</div>
26+
</div>
27+
<script src="./src/hammer.js"></script>
28+
<script src="./cutter/cutter.js"></script>
29+
<script src="./src/index.js"></script>
30+
</body>
31+
</html>

‎cutter/src/bg.jpg‎

64.2 KB
Loading

picDrag/hammer.js renamed to cutter/src/hammer.js

File renamed without changes.

‎cutter/src/index.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
window.onload = function() {
2+
3+
function SubType() {
4+
var doc = document;
5+
this.pageListDom = Array.prototype.slice.apply(doc.querySelectorAll('.page'));
6+
this.fileDom = doc.querySelector('#files');
7+
this.picAreaDom = doc.querySelector('.pic-area');
8+
this.submitBtnDom = doc.querySelector('.submit-btn');
9+
this.showAreaDom = doc.querySelector('.show-area');
10+
}
11+
12+
SubType.prototype = {
13+
init: function() {
14+
this.turnPage(0);
15+
},
16+
17+
handleUpload: function(files) {
18+
var reader = new FileReader(),
19+
_this = this;
20+
reader.readAsDataURL(files);
21+
22+
reader.onload = function() {
23+
_this.chooseComplete(reader.result);
24+
};
25+
},
26+
27+
chooseComplete: function(url) {
28+
var _this = this;
29+
this.cutter = new Cutter(this.picAreaDom, {
30+
imgUrl: url,
31+
conWidth: document.body.clientWidth,
32+
conHeight: document.body.clientWidth * 1.2,
33+
speed: 2,
34+
callback: function() {
35+
_this.turnPage(1);
36+
}
37+
});
38+
},
39+
40+
cutImage: function() {
41+
var result = this.cutter.cut();
42+
this.showAreaDom.style.backgroundImage = 'url('+result+')';
43+
this.turnPage(2);
44+
},
45+
46+
turnPage: function(pageIndex) {
47+
this.pageListDom.forEach(function(item, index) {
48+
item.style.display = 'none';
49+
});
50+
this.pageListDom[pageIndex].style.display = 'block';
51+
}
52+
}
53+
54+
var a = new SubType();
55+
a.init();
56+
57+
a.fileDom.onchange = function(e) {
58+
a.handleUpload(e.target.files[0]);
59+
};
60+
61+
a.submitBtnDom.onclick = function() {
62+
a.cutImage();
63+
};
64+
};

‎cutter/src/style.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
html, body, div, h1, h2, h3, h4, h5, h6, p, span, img, input, ul, li {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
html, body {
7+
font-family: Arial, Helvetica;
8+
}
9+
10+
p {
11+
width: 100%;
12+
position: absolute;
13+
bottom: 0;
14+
margin-bottom: 10%;
15+
font-size: 20px;
16+
color: #f7f7f7;
17+
text-align: center;
18+
}
19+
20+
.container {
21+
width: 100%;
22+
max-width: 600px;
23+
height: 100%;
24+
margin: 0 auto;
25+
position: relative;
26+
overflow: hidden;
27+
}
28+
29+
.page {
30+
width: 100%;
31+
height: 100%;
32+
position: absolute;
33+
top: 0;
34+
left: 0;
35+
display: none;
36+
background-position: center;
37+
background-repeat: no-repeat;
38+
background-size: cover;
39+
background-image: url(./bg.jpg);
40+
}
41+
42+
.choose {
43+
44+
}
45+
46+
.pic-area {
47+
width: 100%;
48+
height: 0;
49+
padding-bottom: 120%;
50+
background-color: grey;
51+
overflow: hidden;
52+
box-shadow: 0 2px 10px 2px rgba(255,255,255,0.6);
53+
}
54+
55+
.pic-area img {
56+
-webkit-transform: translate3d(0,0,0);
57+
-ms-transform: translate3d(0,0,0);
58+
transform: translate3d(0,0,0);
59+
}
60+
61+
#files {
62+
width: 0;
63+
height: 0;
64+
opacity: 0;
65+
}
66+
67+
.show-area {
68+
width: 60%;
69+
height: 0;
70+
padding-bottom: 78%;
71+
position: absolute;
72+
left: 50%;
73+
margin-left: -30%;
74+
margin-top: 20%;
75+
background-repeat: no-repeat;
76+
background-position: center;
77+
background-size: cover;
78+
border-radius: 10px;
79+
box-shadow: 0 0 10px 2px rgba(255,255,255,0.6);
80+
}

‎picDrag/index.html‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

0 commit comments

Comments
 (0)
X Tutup