add new images

Author: JackPu

package.json

@@ -4,7 +4,7 @@
  "description": "a vue plgin for image upload and crop",
  "main": "dist/vue-core-image-upload.vue",
  "dependencies": {
- "core-image-xhr": "^1.0.1",
+ "core-image-xhr": "^1.0.3",
  "vue": "^2.0.5"
  },
  "devDependencies": {

site/client/components/doc/en/CropImage.vue

@@ -12,14 +12,12 @@
  <img class="avatar" :src="src"/>
  </div>
  <vue-core-image-upload
- crop="local"
- resize="local"
- @imageuploaded="crpoServerImageUploaded"
- :data="imgsrc"
- :max-file-size="10485760"
- :cropBtn = "btnText"
- text="上传图片"
- url="/api_school/schools/1/upload/" >
+ crop="local"
+ resize="local"
+ url="http://101.198.151.190/api/upload.php"
+ @imageuploaded="crpoServerImageUploaded"
+ :max-file-size="10485760"
+ text="上传图片" >
  </vue-core-image-upload>
  </div>
  <h4>Server-side crop</h4>
@@ -57,6 +55,7 @@
  <th>W</th>
  <th>X</th>
  <th>Y</th>
+ <th>Rotate Degree</th>
  </tr>
  </thead>
  <tbody>
@@ -65,6 +64,7 @@
  <td>{{cropArgs.toCropImgW}}</td>
  <td>{{cropArgs.toCropImgX}}</td>
  <td>{{cropArgs.toCropImgY}}</td>
+ <td>{{cropArgs.toRotateDegree}}</td>
  </tr>
  </tbody>
  </table>
@@ -97,7 +97,8 @@ export default {
  toCropImgH: '?',
  toCropImgW: '?',
  toCropImgX: '?',
- toCropImgY: '?'
+ toCropImgY: '?',
+ toCropDegrees: '?',
  }
  };
  },
@@ -117,7 +118,8 @@ export default {
  toCropImgH: parseInt(res.data.post.toCropImgH),
  toCropImgW: parseInt(res.data.post.toCropImgW),
  toCropImgX: parseInt(res.data.post.toCropImgX),
- toCropImgY: parseInt(res.data.post.toCropImgY)
+ toCropImgY: parseInt(res.data.post.toCropImgY),
+ toCropDegrees: parseInt(res.data.post.toCropDegrees),
  }
  this.cropSrc = 'http://img1.vued.vanthink.cn/vued41b900045d6d44f3b32e06049621b415.png';
  }

site/src/crop.vue

@@ -18,7 +18,7 @@
  </div>
  </div>
  <resize-bar v-if="resize" ref="resizeBar" @resize="resizeImage"></resize-bar>
- <rotate-bar @rotate="rotateImage"></rotate-bar>
+ <rotate-bar v-if="isRotate" @rotate="rotateImage"></rotate-bar>
  </div>
 </div>
 </template>
@@ -160,6 +160,10 @@ export default {
  isResize: {
  type: [Boolean],
  default: false,
+ },
+ isRotate: {
+ type: [Boolean],
+ default: true,
  }
  },
 
@@ -225,9 +229,7 @@ export default {
  },
 
  rotateImage(degress) {
- console.log(degress);
  const data = canvasHelper.rotate(this.originSrc, degress, (data, w, h) => {
- // console.log(data);
  this.setImage(data, w, h);
  });
  //this.src = src;

site/src/lib/canvas-helper.js

@@ -37,7 +37,10 @@ export default {
  return (typeof num === 'number');
  };
  // check crop options
- if (checkNumber(options.toCropImgX) && checkNumber(options.toCropImgY) && options.toCropImgW > 0 && options.toCropImgH > 0) {
+ if (checkNumber(options.toCropImgX) &&
+ checkNumber(options.toCropImgY) &&
+ options.toCropImgW > 0 &&
+ options.toCropImgH > 0) {
  let w = options.toCropImgW;
  let h = options.toCropImgH;
  if(options.maxWidth && options.maxWidth < w) {
@@ -80,24 +83,30 @@ export default {
  ctx.save();
  ctx.translate(canvasWidth / 2, canvasWidth / 2);
  ctx.rotate(degrees * (Math.PI / 180));
- const x = -canvasWidth / 2;
- degrees = degrees % 360;
+ let x = 0;
+ degrees %= 360;
  if (degrees === 0) {
  return callback(src, w, h);
  }
- let y = ((canvasWidth - h) - canvasWidth / 2)
+ let y = 0;
  if ((degrees % 180) !== 0) {
+
+ if (degrees === -90 || degrees === 270) {
+ x = -h;
+ } else {
+ y = -w;
+ }
  const c = w;
  w = h;
  h = c;
- if (degrees === -90 || degrees === 270) {
- y = -canvasWidth / 2;
- }
+ cvs.width = w;
+ cvs.height = h;
+ } else {
+ x = -w;
+ y = -h;
  }
  ctx.drawImage(image, x, y);
  ctx.restore();
- //cvs.width = h;
- //cvs.height = w;
  const mimeType = this._getImageType(image.src);
  const data = cvs.toDataURL(mimeType, 1);
  callback(data, w, h);

site/src/props.js

@@ -35,6 +35,10 @@ export default {
  type: [String, Boolean],
  default: false,
  },
+ rotate: {
+ type: Boolean,
+ default: true,
+ },
  ResizeBtn: {
  type: Object,
  default: function() {
@@ -56,7 +60,7 @@ export default {
  },
  inputAccept:{
  type: String,
- default: 'image/jpg,image/jpeg,image/png'
+ default: 'image/jpg,image/jpeg,image/png,image/gif'
  },
  isXhr: {
  type: Boolean,

site/src/rotate-bar.vue

@@ -46,7 +46,7 @@ export default {
  this.rotateDegree += 90;
  this.$emit('rotate', this.rotateDegree);
  },
- 
+
  rotateLeft() {
  this.rotateDegree -= 90;
  this.$emit('rotate', this.rotateDegree);

site/src/vue-core-image-upload.vue

@@ -5,7 +5,7 @@
  <input v-bind:disabled="uploading" v-bind:id="'g-core-upload-input-' + formID" v-bind:name="name" v-bind:multiple="multiple" type="file" v-bind:accept="inputAccept" v-on:change="change" style="width: 100%; height: 100%;">
  </form>
  <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>
+ <crop ref="cropBox" :is-resize="resize && !crop" :ratio="cropRatio" :is-rotate="rotate"></crop>
  <div class="info-aside">
  <p class="btn-groups" v-if="crop">
  <button type="button" v-on:click="doCrop" class="btn btn-upload">{{cropBtn.ok}}</button>
@@ -95,7 +95,7 @@
  }
 
  this.files = e.target.files;
- if(this.crop || this.resize) {
+ if (this.crop || this.resize) {
  this.__showImage();
  return;
  }
@@ -155,7 +155,6 @@
  })
  }
  upload();
-
  },
 
  doResize(e) {