From 9782d8adfbdb554120833c4bf40d373b0737a763 Mon Sep 17 00:00:00 2001
From: limdblur <limd808@gmail.com>
Date: Wed, 13 Sep 2017 23:40:14 +0800
Subject: [PATCH 1/5] multiple image compress

fix when compress multiple images only works on first jpg image problem.
compressed images send by seperated request, need to be optimized.
---
 src/vue-core-image-upload.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/vue-core-image-upload.vue b/src/vue-core-image-upload.vue
index 0a190e1..6fa72cd 100644
--- a/src/vue-core-image-upload.vue
+++ b/src/vue-core-image-upload.vue
@@ -104,8 +104,8 @@
           return;
         }
         this. __dispatch('imagechanged', this.files.length > 1 ? this.files : this.files[0]);
-        if (this.compress && this.files[0]['type'] !== 'image/png' && this.files[0]['type'] !== 'image/gif') {
-          canvasHelper.compress(this.files[0], 100 - this.compress, (code) => {
+        if (this.compress) {
+          canvasHelper.compress(this.files, 100 - this.compress, (code) => {
             this.tryAjaxUpload('', true, code);
           });
         } else {
@@ -264,10 +264,10 @@
         let data;
         if (isBinary) {
           data = {
-            type: this.files[0]['type'],
-            filename: encodeURI(this.files[0]['name']),
+            type: base64Code['type'],
+            filename: encodeURI(base64Code['name']),
             filed: this.inputOfFile,
-            base64Code: base64Code
+            base64Code: base64Code['base64Code']
           };
           if (typeof this.data === 'object') {
             data = Object.assign(this.data, data);

From 1cdde94b08955db345ae42346a89df3a9c92d533 Mon Sep 17 00:00:00 2001
From: limdblur <limd808@gmail.com>
Date: Wed, 13 Sep 2017 23:43:39 +0800
Subject: [PATCH 2/5] multiple image compress

fix when compress multiple images only works on first jpg image problem.
compressed images send by seperated request, need to be optimized.
---
 src/lib/canvas-helper.js | 34 +++++++++++++++++++---------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/lib/canvas-helper.js b/src/lib/canvas-helper.js
index 83f6d98..b0a9309 100644
--- a/src/lib/canvas-helper.js
+++ b/src/lib/canvas-helper.js
@@ -12,22 +12,26 @@ export default {
     }
     return mimeType;
   },
-
   compress (src, quality, callback) {
-    const reader = new FileReader();
-    const self = this;
-    reader.onload = function(event) {
-      const image = new Image();
-      image.src = event.target.result;
-      image.onload = function() {
-        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);
-        callback(newImageData);
-      }
-    };
-    reader.readAsDataURL(src);
+    for (var i = 0; i < src.length; i++) {
+      const reader = new FileReader();
+      const self = this;
+      (function (file) {
+        reader.onload = (function(event) {
+          const image = new Image();
+          image.src = event.target.result;
+          image.onload = function() {
+            const mimeType = self._getImageType(file.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);
+            file['base64Code'] = newImageData;
+            callback(file);
+          }
+        })
+      })(src[i])
+      reader.readAsDataURL(src[i]);
+    }
   },
   /**
   * crop image via canvas and generate data

From d9367ae8f16287f0d6d98c117deb6ca50cb8f1c6 Mon Sep 17 00:00:00 2001
From: limdblur <limd808@gmail.com>
Date: Thu, 14 Sep 2017 14:29:22 +0800
Subject: [PATCH 3/5] Resolve conflict between multiple and crop/resize

For compress multiple images, last time i modified tryAjaxUpload() which turned out can't crop or resize image, that because corp/resize a image use a <img /> as parameter but multiple compress use Files. Now deal them seperately in isBinary.
---
 src/vue-core-image-upload.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/vue-core-image-upload.vue b/src/vue-core-image-upload.vue
index 6fa72cd..e15ddc6 100644
--- a/src/vue-core-image-upload.vue
+++ b/src/vue-core-image-upload.vue
@@ -263,11 +263,14 @@
         }
         let data;
         if (isBinary) {
+          var dataType = base64Code['type'] ? base64Code['type'] : this.files[0]['type'];
+          var dataName = base64Code['name'] ? encodeURI(base64Code['name']) : this.files[0]['name'];
+          var code = base64Code['base64Code'] ? base64Code['base64Code'] : base64Code;
           data = {
-            type: base64Code['type'],
-            filename: encodeURI(base64Code['name']),
+            type: dataType,
+            filename: dataName,
             filed: this.inputOfFile,
-            base64Code: base64Code['base64Code']
+            base64Code: code
           };
           if (typeof this.data === 'object') {
             data = Object.assign(this.data, data);

From 24273b2235e38195c99468c290c7f0b1ae237c1b Mon Sep 17 00:00:00 2001
From: limdblur <limd808@gmail.com>
Date: Thu, 14 Sep 2017 17:32:25 +0800
Subject: [PATCH 4/5] Auto

---
 src/vue-core-image-upload.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/vue-core-image-upload.vue b/src/vue-core-image-upload.vue
index e15ddc6..f68a7da 100644
--- a/src/vue-core-image-upload.vue
+++ b/src/vue-core-image-upload.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="g-core-image-upload-btn">
     <slot>{{text}}</slot>
-    <form class="g-core-image-upload-form" v-show="!hasImage" method="post" enctype="multipart/form-data" action="/api2/common_user/cropHeadUrl" style="display: block; cursor: pointer; position: absolute; left: 0px; top: 0px; width: 1242px; height: 61px; opacity: 0; margin: 0px; padding: 0px; overflow: hidden;">
+    <form class="g-core-image-upload-form" v-show="!hasImage" method="post" enctype="multipart/form-data" action="/api2/common_user/cropHeadUrl" style="display: block; cursor: pointer; position: absolute; left: 0px; top: 0px; opacity: 0; margin: 0px; padding: 0px; overflow: hidden;">
       <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">

From 5965ea847d285461e470c80cd78014a36c32982f Mon Sep 17 00:00:00 2001
From: limdblur <limd808@gmail.com>
Date: Fri, 3 Nov 2017 14:37:54 +0800
Subject: [PATCH 5/5] Update canvas-helper.js

format
---
 src/lib/canvas-helper.js | 69 ++++++++++++++++++----------------------
 1 file changed, 31 insertions(+), 38 deletions(-)

diff --git a/src/lib/canvas-helper.js b/src/lib/canvas-helper.js
index b0a9309..8138ae5 100644
--- a/src/lib/canvas-helper.js
+++ b/src/lib/canvas-helper.js
@@ -4,10 +4,10 @@
 **/
 
 export default {
-  _getImageType(str) {
+  _getImageType (str) {
     let mimeType = 'image/jpeg';
     const outputType = str.match(/(image\/[\w]+)\.*/)[0];
-    if (typeof outputType !== 'undefined'){
+    if (typeof outputType !== 'undefined') {
       mimeType = outputType;
     }
     return mimeType;
@@ -17,14 +17,14 @@ export default {
       const reader = new FileReader();
       const self = this;
       (function (file) {
-        reader.onload = (function(event) {
+        reader.onload = (function (event) {
           const image = new Image();
           image.src = event.target.result;
-          image.onload = function() {
+          image.onload = function () {
             const mimeType = self._getImageType(file.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 ctx = cvs.getContext('2d').drawImage(image, 0, 0);
+            const newImageData = cvs.toDataURL(mimeType, quality / 100);
             file['base64Code'] = newImageData;
             callback(file);
           }
@@ -36,8 +36,8 @@ export default {
   /**
   * crop image via canvas and generate data
   **/
-  crop(image, options, callback) {
-    const checkNumber = function(num) {
+  crop (image, options, callback) {
+    const checkNumber = function (num) {
       return (typeof num === 'number');
     };
     // check crop options
@@ -47,7 +47,7 @@ export default {
         options.toCropImgH > 0) {
       let w = options.toCropImgW;
       let h = options.toCropImgH;
-      if(options.maxWidth && options.maxWidth < w) {
+      if (options.maxWidth && options.maxWidth < w) {
         w = options.maxWidth;
         h = options.toCropImgH * w / options.toCropImgW;
       }
@@ -55,71 +55,67 @@ export default {
         h = options.maxHeight
       }
       const cvs = this._getCanvas(w, h);
-      const ctx = cvs.getContext('2d').drawImage(image, options.toCropImgX, options.toCropImgY, options.toCropImgW, options.toCropImgH, 0 , 0, w, h);
+      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);
+      const data = cvs.toDataURL(mimeType, options.compress / 100);
       callback(data);
     }
   },
-
   /**
   * init image for reset size and rotation
   **/
-  init(src, callback) {
+  init (src, callback) {
       let image = new Image();
       image.src = src;
       var self = this;
-      image.onload = function() {
+      image.onload = function () {
         var mimeType = self._getImageType(image.src);
         var cvs = self._getCanvas(image.naturalWidth, image.naturalHeight);
-        var ctx = cvs.getContext("2d");
+        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) {
+  rotate (imageData, direction, callback) {
       let image = new Image();
       image.src = imageData.src;
       var self = this;
-      image.onload = function() {
+      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);
+        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.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) {
+  resize (image, options, callback) {
+    const checkNumber = function (num) {
       return (typeof num === 'number');
     };
     if (checkNumber(options.toCropImgX) && checkNumber(options.toCropImgY) && options.toCropImgW > 0 && options.toCropImgH > 0) {
-      const w = options.toCropImgW  * options.imgChangeRatio;
+      const w = options.toCropImgW * options.imgChangeRatio;
       const h = options.toCropImgH * options.imgChangeRatio;
       const cvs = this._getCanvas(w, h);
-      const ctx = cvs.getContext('2d').drawImage(image, 0, 0, options.toCropImgW, options.toCropImgH, 0, 0, w , h);
+      const ctx = cvs.getContext('2d').drawImage(image, 0, 0, options.toCropImgW, options.toCropImgH, 0, 0, w, h);
       const mimeType = this._getImageType(image.src);
       const data = cvs.toDataURL(mimeType, options.compress / 100);
       callback(data);
     }
   },
-
-  rotate2(src, degrees, callback) {
-    this._loadImage(src, (image) => {
+  rotate2 (src, degrees, callback) {
+    this._loadImage(src, image => {
       let w = image.naturalWidth;
       let h = image.naturalHeight;
       const canvasWidth = Math.max(w, h);
@@ -156,8 +152,7 @@ export default {
       callback(data, w, h);
     });
   },
-
-  _loadImage(data, callback) {
+  _loadImage (data, callback) {
     const image = new Image();
     image.src = data;
     image.onload = function () {
@@ -167,12 +162,10 @@ export default {
       console.log('Error: image error!');
     };
   },
-
-  _getCanvas(width, height) {
+  _getCanvas (width, height) {
     const canvas = document.createElement('canvas');
     canvas.width = width;
     canvas.height = height;
     return canvas;
-  },
-
+  }
 };