update crop compress

Author: JackPu

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

@@ -1,10 +1,11 @@
 <template>
   <div class="components">
     <h3>裁剪图片</h3>
-    <p>插件支持图片的裁剪，你可以指定图片裁剪的宽高，图片的的最大宽度和高度这些。</p>
-    <p>图片裁剪完有两种选择，选择<strong>本地裁剪<code>local</code></strong>或者<strong>服务端裁剪 <code>server</code></strong>。你可以设置 <code>crop</code>的值来开启裁剪</p>
+    <p>你可以通过设置 <code>crop</code>，来实现图片的裁剪。你可以指定图片裁剪的宽高，以及它的最大宽度和高度这些参数。</p>
+    <p class="warnning"> 设置图片裁剪后，批量上传将不再生效。</p>
+    <p>图片裁剪完有两种选择，选择<strong>本地裁剪<code>local</code></strong>或者<strong>服务端裁剪 <code>server</code></strong>。</p>
     <h4>本地裁剪</h4>
-    <p>你可以将 crop 设置为 local 来实现本地裁剪。裁剪完成后会发送裁剪完成后的图片到服务端。</p>
+    <p>你可以将 crop 设置为 local 来实现本地裁剪。本地裁剪完成后发送给服务端接口的图片便是已经裁剪好的图片。</p>
     <div class="center">
       <div class="user">
           <img class="avatar" :src="cropSrc"/>
@@ -16,6 +17,7 @@
          url="http://101.198.151.190/api/crop.php"
          extensions="png,jpeg,jpg"
          text="Crop Image"
+         compress="20"
          @imageuploaded="crpoServerImageUploaded">
       </vue-core-image-upload>
     </div>
@@ -41,7 +43,7 @@
       <vue-core-image-upload
          crop-ratio="1:1"
          :class="['btn', 'btn-primary']"
-         crop="true"
+         crop="server"
          url="http://101.198.151.190/api/crop.php"
          extensions="png,gif,jpeg,jpg"
          text="Crop Image"
@@ -69,14 +71,15 @@
     <pre v-highlightjs><code class="HTML">&lt;vue-core-image-upload
    crop-ratio="1:1"
    :class="['btn', 'btn-primary']"
-   :crop="true"
+   crop="server"
    url="http://101.198.151.190/api/crop.php"
    extensions="png,gif,jpeg,jpg"
    text="Crop Image"
    @imageuploaded="crpoServerImageUploaded"&gt;
 &lt;/vue-core-image-upload&gt;
 
     </code></pre>
+    <a  href>View Code Source</a>
   </div>
 </template>
 

site/client/less/modules/m-type.less

@@ -358,4 +358,11 @@ margin on the iframe, cause it breaks stuff. */
 
 .fluid-width-video-wrapper iframe {
     margin: 0;
-}
+}
+.warnning{
+  border-left: 3px solid #f39c12;
+  padding-left: 15px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background-color: #ddd;
+}

site/src/lib/canvas-helper.js

@@ -51,12 +51,7 @@ export default {
       const ctx = cvs.getContext('2d').drawImage(image, options.toCropImgX, options.toCropImgY, options.toCropImgW, options.toCropImgH, 0 , 0, w, h);
       const mimeType = this._getImageType(image.src);
       const data = cvs.toDataURL(mimeType, options.compress/100);
-      console.log(data);
-      const targetImage = new Image();
-      targetImage.src = data;
-      return targetImage;
-    } else {
-      callback();
+      callback(data);
     }
   },
 

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

@@ -56,16 +56,6 @@
           return this.inputOfFile + '[]';
         }
         return this.inputOfFile;
-      },
-
-      compress() {
-        if (this.compress >= 100) {
-          return 99;
-        }
-        if(this.compress <= 0) {
-          return 0;
-        }
-        return this.compress;
       }
 
     },
@@ -155,7 +145,6 @@
         const newCSSObj = cropBox.getCropData();
 
         for (const k of Object.keys(newCSSObj)) {
-          console.log(k);
           this.data[k] = newCSSObj[k];
         }
         if (this.maxWidth) {
@@ -164,17 +153,17 @@
         if (this.maxHeight) {
           this.data['maxHeight'] = this.maxHeight;
         }
-        const upload = () => {
+        const upload = (code) => {
           this.tryAjaxUpload(() => {
             btn.value = btn.value.replace('...','');
             btn.disabled = false;
-          });
+          }, true, code);
         };
         if (this.crop === 'local') {
           const targetImage = cropBox.getCropImage();
-          this.data.compress = 100 - this.compress;
-          return canvasHelper.crop(targetImage, this.data, () => {
-              // upload();
+          this.data.comprose = 100 - this.compress;
+          return canvasHelper.crop(targetImage, this.data, (code) => {
+            upload(code);
           })
         }
         upload();