add crop images

JackPu · JackPu · commit c611a7f53184 · 2017-07-04T20:11:07.000+08:00
diff --git a/site/client/components/doc/en/CropImage.vue b/site/client/components/doc/en/CropImage.vue
@@ -17,6 +17,7 @@
         url="http://101.198.151.190/api/upload.php"
         @imageuploaded="crpoServerImageUploaded"
         :max-file-size="10485760"
+        :rotate="false"
         text="上传图片" >
     </vue-core-image-upload>
     </div>
diff --git a/site/src/lib/canvas-helper.js b/site/src/lib/canvas-helper.js
@@ -83,35 +83,33 @@ export default {
       ctx.save();
       ctx.translate(canvasWidth / 2, canvasWidth / 2);
       ctx.rotate(degrees * (Math.PI / 180));
-      let x = 0;
+      let x = -canvasWidth / 2;
+      let y = -canvasWidth / 2;
       degrees %= 360;
       if (degrees === 0) {
         return callback(src, w, h);
       }
-      let y = 0;
       if ((degrees % 180) !== 0) {
-
         if (degrees === -90 || degrees === 270) {
-          x = -h;
+          x = -w + canvasWidth / 2;
         } else {
-          y = -w;
+          y = canvasWidth/2 - h;
         }
         const c = w;
         w = h;
         h = c;
-        cvs.width = w;
-        cvs.height = h;
       } else {
-        x = -w;
-        y = -h;
+        x = canvasWidth/2 - w;
+        y = canvasWidth/2 - h;
       }
+
       ctx.drawImage(image, x, y);
-      ctx.restore();
+      const cvs2 = this._getCanvas(w, h);
+      const ctx2 = cvs2.getContext('2d');
+      ctx2.drawImage(cvs, 0, 0, w, h, 0, 0, w, h);
       const mimeType = this._getImageType(image.src);
       const data = cvs.toDataURL(mimeType, 1);
       callback(data, w, h);
-      cvs = null;
-      ctx = null;
     });
   },
 
