Skip to content

Commit e80bbed

Browse files
JackPuJackPu
committed
finish rotate
1 parent d1a90ce commit e80bbed

File tree

4 files changed

+40
-20
lines changed

4 files changed

+40
-20
lines changed

‎.eslintrc.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@
2727
"no-console": 0,
2828
"comma-dangle": 0,
2929
"no-extra-semi": 0,
30+
"space-before-function-paren": 0,
31+
"no-underscore-dangle": 0,
3032
"semi": ["error", "always"]
3133
}
3234
}

‎site/src/crop.vue

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,9 @@ export default {
181181
methods: {
182182
setImage(src, w, h) {
183183
this.src = src;
184+
if (!this.originSrc) {
185+
this.originSrc = this.src;
186+
}
184187
if (this.ratio.indexOf(':') > 0) {
185188
this.ratioW = this.ratio.split(':')[0];
186189
this.ratioH = this.ratio.split(':')[1];
@@ -223,8 +226,8 @@ export default {
223226
224227
rotateImage(degress) {
225228
console.log(degress);
226-
const data = canvasHelper.rotate(this.src, degress, (data, w, h) => {
227-
console.log(data);
229+
const data = canvasHelper.rotate(this.originSrc, degress, (data, w, h) => {
230+
// console.log(data);
228231
this.setImage(data, w, h);
229232
});
230233
//this.src = src;

‎site/src/lib/canvas-helper.js

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default {
1717
const reader = new FileReader();
1818
const self = this;
1919
reader.onload = function(event) {
20-
let image = new Image();
20+
const image = new Image();
2121
image.src = event.target.result;
2222
image.onload = function() {
2323
const mimeType = self._getImageType(src.type);
@@ -37,7 +37,7 @@ export default {
3737
return (typeof num === 'number');
3838
};
3939
// check crop options
40-
if(checkNumber(options.toCropImgX) && checkNumber(options.toCropImgY) && options.toCropImgW > 0 && options.toCropImgH > 0) {
40+
if (checkNumber(options.toCropImgX) && checkNumber(options.toCropImgY) && options.toCropImgW > 0 && options.toCropImgH > 0) {
4141
let w = options.toCropImgW;
4242
let h = options.toCropImgH;
4343
if(options.maxWidth && options.maxWidth < w) {
@@ -65,7 +65,7 @@ export default {
6565
const cvs = this._getCanvas(w, h);
6666
const ctx = cvs.getContext('2d').drawImage(image, 0, 0, options.toCropImgW, options.toCropImgH, 0 , 0, w , h);
6767
const mimeType = this._getImageType(image.src);
68-
const data = cvs.toDataURL(mimeType, options.compress/100);
68+
const data = cvs.toDataURL(mimeType, options.compress / 100);
6969
callback(data);
7070
}
7171
},
@@ -75,21 +75,34 @@ export default {
7575
let w = image.naturalWidth;
7676
let h = image.naturalHeight;
7777
const canvasWidth = Math.max(w, h);
78-
const cvs = this._getCanvas(canvasWidth, canvasWidth);
79-
const targetCvs = this._getCanvas(h, w);
80-
const ctx = cvs.getContext('2d');
81-
ctx.drawImage(image, (canvasWidth - w) / 2, (canvasWidth - h) / 2);
82-
ctx.clearRect(0, 0, canvasWidth, canvasWidth);
78+
let cvs = this._getCanvas(canvasWidth, canvasWidth);
79+
let ctx = cvs.getContext('2d');
8380
ctx.save();
8481
ctx.translate(canvasWidth / 2, canvasWidth / 2);
8582
ctx.rotate(degrees * (Math.PI / 180));
86-
cvs.width = h;
87-
cvs.height = w;
88-
ctx.drawImage(image, -((image.width - image.height) / 2), -((image.width - image.height) / 2));
83+
const x = -canvasWidth / 2;
84+
degrees = degrees % 360;
85+
if (degrees === 0) {
86+
return callback(src, w, h);
87+
}
88+
let y = ((canvasWidth - h) - canvasWidth / 2)
89+
if ((degrees % 180) !== 0) {
90+
const c = w;
91+
w = h;
92+
h = c;
93+
if (degrees === -90 || degrees === 270) {
94+
y = -canvasWidth / 2;
95+
}
96+
}
97+
ctx.drawImage(image, x, y);
8998
ctx.restore();
99+
//cvs.width = h;
100+
//cvs.height = w;
90101
const mimeType = this._getImageType(image.src);
91102
const data = cvs.toDataURL(mimeType, 1);
92-
callback(data, h, w);
103+
callback(data, w, h);
104+
cvs = null;
105+
ctx = null;
93106
});
94107
},
95108

@@ -98,10 +111,10 @@ export default {
98111
image.src = data;
99112
image.onload = function () {
100113
callback(image);
101-
}
102-
image.onerror = function() {
114+
};
115+
image.onerror = function () {
103116
console.log('Error: image error!');
104-
}
117+
};
105118
},
106119

107120
_getCanvas(width, height) {

‎site/src/rotate-bar.vue

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,13 @@ export default {
4343
4444
methods: {
4545
rotateRight() {
46-
this.$emit('rotate', 90);
46+
this.rotateDegree += 90;
47+
this.$emit('rotate', this.rotateDegree);
4748
},
48-
49+
4950
rotateLeft() {
50-
this.$emit('rotate', -90);
51+
this.rotateDegree -= 90;
52+
this.$emit('rotate', this.rotateDegree);
5153
},
5254
}
5355
};

0 commit comments

Comments
 (0)