fix rotate function

Author: JackPu

site/src/crop.vue

@@ -18,7 +18,7 @@
  </div>
  </div>
  <resize-bar v-if="resize" ref="resizeBar" @resize="resizeImage"></resize-bar>
- <rotate-bar @rotate="roateImage"></rotate-bar>
+ <rotate-bar @rotate="rotateImage"></rotate-bar>
  </div>
 </div>
 </template>
@@ -131,6 +131,7 @@ import drag from './lib/drag';
 import resize from './lib/resize';
 import GIF_LOADING_SRC from './lib/loading-gif';
 import helper from './lib/helper';
+import canvasHelper from './lib/canvas-helper';
 import ResizeBar from './resize-bar.vue';
 import RotateBar from './rotate-bar';
 // set cropbox size in image
@@ -220,9 +221,13 @@ export default {
  this.imgChangeRatio = this.width / this.natrualWidth;
  },
 
- rotateImage(src) {
- console.log(src);
- this.src = src;
+ rotateImage(degress) {
+ console.log(degress);
+ const data = canvasHelper.rotate(this.src, degress, (data, w, h) => {
+ console.log(data);
+ this.setImage(data, w, h);
+ });
+ //this.src = src;
  },
 
  setLayout(w, h) {

site/src/lib/canvas-helper.js

@@ -70,24 +70,27 @@ export default {
  }
  },
 
- rotate(src, degress, callback) {
+ rotate(src, degrees, callback) {
  this._loadImage(src, (image) => {
  let w = image.naturalWidth;
  let h = image.naturalHeight;
  const canvasWidth = Math.max(w, h);
  const cvs = this._getCanvas(canvasWidth, canvasWidth);
- const ctx = cvs.getContext('2d').drawImage(image, (canvasWidth - w) / 2 , (canvasWidth - h) / 2);
+ const targetCvs = this._getCanvas(h, w);
+ const ctx = cvs.getContext('2d');
+ ctx.drawImage(image, (canvasWidth - w) / 2, (canvasWidth - h) / 2);
  ctx.clearRect(0, 0, canvasWidth, canvasWidth);
  ctx.save();
  ctx.translate(canvasWidth / 2, canvasWidth / 2);
- ctx.rotate( degrees * (Math.PI / 180));
- ctx.drawImage(image, -image.width/2, -image.width/2);
+ ctx.rotate(degrees * (Math.PI / 180));
+ cvs.width = h;
+ cvs.height = w;
+ ctx.drawImage(image, -((image.width - image.height) / 2), -((image.width - image.height) / 2));
  ctx.restore();
  const mimeType = this._getImageType(image.src);
- const data = cvs.toDataURL(mimeType, options.compress/100);
- callback(data);
+ const data = cvs.toDataURL(mimeType, 1);
+ callback(data, h, w);
  });
-
  },
 
  _loadImage(data, callback) {

site/src/rotate-bar.vue

@@ -34,8 +34,6 @@
 </style>
 
 <script>
-import canvasHelper from './lib/canvas-helper';
-
 export default {
  data() {
  return {
@@ -45,13 +43,12 @@ export default {
 
  methods: {
  rotateRight() {
- this.rotateDegree = (this.rotateDegree % 360) + 90;
+ this.$emit('rotate', 90);
  },
 
  rotateLeft() {
- this.rotateDegree = (this.rotateDegree % 360) + 90;
+ this.$emit('rotate', -90);
  },
-
  }
 };