add new rotate-bar

Author: JackPu

.npmignore

@@ -1 +1,5 @@
 site
+.eslintrc.json
+shots
+.babelrc
+webpack.config.js

dist/crop.vue

@@ -18,6 +18,7 @@
  </div>
  </div>
  <resize-bar v-if="resize" ref="resizeBar" @resize="resizeImage"></resize-bar>
+ <rotate-bar v-if="isRotate" @rotate="rotateImage"></rotate-bar>
  </div>
 </div>
 </template>
@@ -130,7 +131,9 @@ 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.vue';
 // set cropbox size in image
 const CROPBOX_PERCENT = 75;
 const isMobile = helper.isMobile;
@@ -139,6 +142,7 @@ const areaHeight = window.innerHeight - 110;
 export default {
  components: {
  ResizeBar,
+ RotateBar,
  },
  props: {
  ratio: {
@@ -156,6 +160,10 @@ export default {
  isResize: {
  type: [Boolean],
  default: false,
+ },
+ isRotate: {
+ type: [Boolean],
+ default: true,
  }
  },
 
@@ -177,6 +185,9 @@ export default {
  methods: {
  setImage(src, w, h) {
  this.src = src;
+ if (!this.originSrc) {
+ this.originSrc = this.src;
+ }
  if (this.ratio.indexOf(':') > 0) {
  this.ratioW = this.ratio.split(':')[0];
  this.ratioH = this.ratio.split(':')[1];
@@ -217,14 +228,20 @@ export default {
  this.imgChangeRatio = this.width / this.natrualWidth;
  },
 
+ rotateImage(degress) {
+ const data = canvasHelper.rotate(this.originSrc, degress, (data, w, h) => {
+ this.setImage(data, w, h);
+ });
+ //this.src = src;
+ },
+
  setLayout(w, h) {
  let H = areaHeight,
  W = areaWidth,
  width = w,
  height = h,
  marginLeft = 0,
  marginTop = 0;
-
  // caculate the image ratio
  let R = width / height;
  let Rs = W / H;