Merge pull request Vanthink-UED#103 from Shinerising/master

Fix iOS image rotate issue & Add image rotate function

Author: JackPu

src/lib/canvas-helper.js

@@ -54,6 +54,48 @@ export default {
  callback(data);
  }
  },
+ 
+ /**
+ * init image for reset size and rotation
+ **/
+ init(src, callback) {
+ console.log(src);
+ let image = new Image();
+ image.src = src;
+ var self = this;
+ image.onload = function() {
+ var mimeType = self._getImageType(image.src);
+ var cvs = self._getCanvas(image.naturalWidth, image.naturalHeight);
+ var ctx = cvs.getContext("2d");
+ ctx.drawImage(image, 0, 0);
+ var newImageData = cvs.toDataURL(mimeType, 100);
+ callback(newImageData);
+ }
+ },
+
+ /**
+ * rotate image via canvas
+ **/
+ rotate(imageData, direction, callback) {
+ let image = new Image();
+ image.src = imageData.src;
+ var self = this;
+ image.onload = function() {
+ var mimeType = self._getImageType(image.src);
+ var cvs = self._getCanvas(image.naturalHeight, image.naturalWidth);
+ var ctx = cvs.getContext("2d");
+ if (direction == 1) { 
+ ctx.rotate(90 * Math.PI / 180);
+ ctx.translate(0, -cvs.width);
+ } else {
+ ctx.rotate(-90 * Math.PI / 180);
+ ctx.translate(-cvs.height, 0);
+ }
+ ctx.drawImage(image, 0, 0);
+ var newImageData = cvs.toDataURL(mimeType, 100);
+ callback(newImageData);
+ }
+ },
 
  resize(image, options, callback) {
  const checkNumber = function(num) {

src/vue-core-image-upload.vue

@@ -7,6 +7,10 @@
  <div class="g-core-image-corp-container" v-bind:id="'vciu-modal-' + formID" v-show="hasImage">
  <crop ref="cropBox" :is-resize="resize && !crop" :ratio="cropRatio"></crop>
  <div class="info-aside">
+ <p class="btn-groups rotate-groups" v-if="crop">
+ <button type="button" v-on:click="doRotate" class="btn btn-rotate">↺</button>
+ <button type="button" v-on:click="doReverseRotate" class="btn btn-reverserotate">↻</button>
+ </p>
  <p class="btn-groups" v-if="crop">
  <button type="button" v-on:click="doCrop" class="btn btn-upload">{{cropBtn.ok}}</button>
  <button type="button" v-on:click="cancel" class="btn btn-cancel">{{cropBtn.cancel}}</button>
@@ -133,7 +137,9 @@
  const cropBox = this.$refs.cropBox;
  pic.onload= function() {
  self.image.minProgress = self.minWidth / pic.naturalWidth;
- self.imgChangeRatio = cropBox.setImage(src, pic.naturalWidth, pic.naturalHeight);
+ canvasHelper.init(src, (src) => {
+ self.imgChangeRatio = cropBox.setImage(src, pic.naturalWidth, pic.naturalHeight);
+ });
  }
  },
 
@@ -142,6 +148,26 @@
  cropBox.resizeImage(progress);
  },
 
+ doRotate(e) {
+ let self = this;
+ const cropBox = this.$refs.cropBox;
+ const targetImage = cropBox.getCropImage();
+ this.data.comprose = 100 - this.compress;
+ return canvasHelper.rotate(targetImage, 1, (src) => {
+ self.__initImage(src)
+ })
+ },
+
+ doReverseRotate(e) {
+ let self = this;
+ const cropBox = this.$refs.cropBox;
+ const targetImage = cropBox.getCropImage();
+ this.data.comprose = 100 - this.compress;
+ return canvasHelper.rotate(targetImage, -1, (src) => {
+ self.__initImage(src)
+ })
+ },
+
  doCrop(e) {
  this.__setData('crop');
  const cropBox = this.$refs.cropBox;
@@ -159,7 +185,7 @@
  },
 
  doResize(e) {
- this.__setData('reszie');
+ this.__setData('resize');
  const cropBox = this.$refs.cropBox;
  const upload = this.__setUpload(e.target);
  if (this.resize === 'local') {