update compress

Author: JackPu

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

@@ -11,11 +11,9 @@
         @imageuploaded="imageUploded"
         :max-file-size="5242880"
         compress="50"
-        url="http://101.198.151.190/api/crop.php" >
+        url="http://101.198.151.190/api/upload.php" >
       </vue-core-image-upload>
     </div>
-
-
   </div>
 </template>
 
@@ -35,10 +33,10 @@ export default {
 
   methods: {
     imageChanged(files) {
-      coreImageCompress(files, 'asd', 90);
+
     },
     imageUploded(res) {
-
+        this.src = res.data.src;
     }
   }
 

site/src/crop.vue

@@ -251,7 +251,6 @@ export default {
       };
       const move = function (ev) {
         const newCropStyle = drag(ev, self.el, coor);
-        console.log(newCropStyle);
         if (newCropStyle) {
           self.cropCSS.left = newCropStyle.left;
           self.cropCSS.top = newCropStyle.top;

site/src/lib/canvas-helper.js

@@ -1,6 +1,6 @@
 /**
 * compress image
-* @param src
+* reference https://github.com/brunobar79/J-I-C
 **/
 
 export default {
@@ -20,13 +20,11 @@ export default {
       let image = new Image();
       image.src = event.target.result;
       image.onload = function() {
-        const outputType = self._getImageType(src.type);
+        const mimeType = self._getImageType(src.type);
         const cvs = self._getCanvas(image.naturalWidth, image.naturalHeight);
         const ctx = cvs.getContext("2d").drawImage(image, 0, 0);
         const newImageData = cvs.toDataURL(mimeType, quality/100);
-        const targetImage = new Image();
-        targetImage.src = newImageData;
-        return targetImage;
+        callback(newImageData);
       }
     };
     reader.readAsDataURL(src);

site/src/lib/xhr.js

@@ -1,11 +1,24 @@
 /**
  * simple ajax handler
  **/
-module.exports = function (method, url, headers, data, callback, err) {
+
+ //ADD sendAsBinary compatibilty to older browsers
+ if (XMLHttpRequest.prototype.sendAsBinary === undefined) {
+   XMLHttpRequest.prototype.sendAsBinary = function(string) {
+     var bytes = Array.prototype.map.call(string, function(c) {
+         return c.charCodeAt(0) & 0xff;
+     });
+     this.send(new Uint8Array(bytes).buffer);
+   };
+ }
+
+module.exports = function (method, url, headers, data, callback, err, isBinary) {
+
   const r = new XMLHttpRequest();
   const error = err || function () {
     console.error('AJAX ERROR!');
   };
+  const boundary = 'vuecodeimageupload';
   // Binary?
   let binary = false;
   if (method === 'blob') {
@@ -40,25 +53,9 @@ module.exports = function (method, url, headers, data, callback, err) {
   // Should we add the query to the URL?
   if (method === 'GET' || method === 'DELETE') {
     data = null;
-  }
-  else if (data && typeof (data) !== 'string' && !(data instanceof FormData) && !(data instanceof File) && !(data instanceof Blob)) {
-    // Loop through and add formData
-    var f = new FormData();
-    for (x in data)
-      if (data.hasOwnProperty(x)) {
-        if (data[x] instanceof HTMLInputElement) {
-          if ('files' in data[x] && data[x].files.length > 0) {
-            f.append(x, data[x].files[0]);
-          }
-        }
-        else if (data[x] instanceof Blob) {
-          f.append(x, data[x], data.name);
-        }
-        else {
-          f.append(x, data[x]);
-        }
-      }
-    data = f;
+  } else if (isBinary) {
+    const code = data.base64Code.replace('data:' + data.type + ';base64,', '');
+    data = ['--' + boundary, 'Content-Disposition: form-data; name="' + data.filed + '"; filename="' + data.filename + '"', 'Content-Type: ' + data.type, '', window.atob(code), '--' + boundary + '--'].join('\r\n');
   }
   // Open the path, async
   r.open(method, url, true);
@@ -75,6 +72,12 @@ module.exports = function (method, url, headers, data, callback, err) {
     for (x in headers) {
       r.setRequestHeader(x, headers[x]);
     }
+    if (isBinary) {
+      r.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
+    }
+  }
+  if (isBinary) {
+    return r.sendAsBinary(data);
   }
   r.send(data);
   return r;

site/src/props.js

@@ -21,7 +21,7 @@ export default {
     default: 'files'
   },
   crop: {
-    type: [String],
+    type: [String, Boolean],
     default: ''
   },
   cropBtn: {

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

@@ -98,12 +98,15 @@
           this.__showImage();
           return;
         }
-        this. __dispatch('imagechanged',this.files[0]);
-        this.tryAjaxUpload();
-
+        this. __dispatch('imagechanged', this.files[0]);
+        if (this.compress) {
+          canvasHelper.compress(this.files[0], 100 - this.compress, (code) => {
+            this.tryAjaxUpload('', true, code);
+          });
+        } else {
+          this.tryAjaxUpload();
+        }
       },
-
-
       __showImage() {
         this.hasImage = true;
         this.__readFiles();
@@ -174,37 +177,49 @@
       },
 
       // use ajax upload  IE9+
-      tryAjaxUpload(callback) {
+      tryAjaxUpload(callback, isBinary, base64Code) {
+        const self = this;
         this. __dispatch('imageuploading',this.files[0]);
+        const done = function(res) {
+          if(typeof callback === 'function') {
+            callback();
+          }
+          self.uploading = false;
+          self.cancel();
+          self.__dispatch('imageuploaded',res);
+        };
+        const errorUpload = function(err) {
+          self.__dispatch('errorhandle', err);
+        };
         if (!this.isXhr) {
           if(this.crop) {
             this.hasImage = false;
           }
           return typeof callback === 'function' && callback();
         }
-        const self = this;
-        let data = new FormData();
-        for(let i=0;i<this.files.length;i++) {
-          data.append(self.inputOfFile, this.files[i]);
-        }
-        if (typeof this.data === 'object') {
-            for(let k in this.data) {
-              if(this.data[k] !== undefined) {
-                data.append(k,this.data[k]);
+        let data;
+        if (isBinary) {
+          data = {
+            type: this.files[0]['type'],
+            filename: this.files[0]['name'],
+            filed: this.inputOfFile,
+            base64Code: base64Code
+          };
+        } else {
+          data = new FormData();
+          for (let i=0;i<this.files.length;i++) {
+            data.append(this.inputOfFile, this.files[i]);
+          }
+          console.log(data);
+          if (typeof this.data === 'object') {
+              for(let k in this.data) {
+                if(this.data[k] !== undefined) {
+                  data.append(k,this.data[k]);
+                }
               }
-            }
-        }
-        xhr('POST',this.url, this.headers, data,function(res) {
-          if(typeof callback === 'function') {
-            callback();
           }
-          self.uploading = false;
-          if(self.crop) {
-              self.hasImage = false;
-           }
-           document.querySelector("#g-core-upload-input-" + self.formID).value = '';
-           self.__dispatch('imageuploaded',res);
-        });
+        }
+        xhr('POST',this.url, this.headers, data, done, errorUpload, isBinary);
       },
     },