Replace vue-advanced-cropper with vue-cropperjs

package-lock.json

@@ -1752,6 +1752,63 @@
           "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "ssri": {
           "version": "8.0.1",
           "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
@@ -1760,6 +1817,28 @@
           "requires": {
             "minipass": "^3.1.1"
           }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.8.3",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
         }
       }
     },
@@ -3134,11 +3213,6 @@
         }
       }
     },
-    "classnames": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
-      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
-    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -3823,6 +3897,11 @@
         "sha.js": "^2.4.8"
       }
     },
+    "cropperjs": {
+      "version": "1.5.12",
+      "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.5.12.tgz",
+      "integrity": "sha512-re7UdjE5UnwdrovyhNzZ6gathI4Rs3KGCBSc8HCIjUo5hO42CtzyblmWLj6QWVw7huHyDMfpKxhiO2II77nhDw=="
+    },
     "cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -4096,11 +4175,6 @@
       "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
       "dev": true
     },
-    "debounce": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
-      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
-    },
     "debug": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
@@ -4576,11 +4650,6 @@
         "stream-shift": "^1.0.0"
       }
     },
-    "easy-bem": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.1.1.tgz",
-      "integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A=="
-    },
     "easy-stack": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/easy-stack/-/easy-stack-1.0.1.tgz",
@@ -11877,16 +11946,6 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
       "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
     },
-    "vue-advanced-cropper": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/vue-advanced-cropper/-/vue-advanced-cropper-1.10.1.tgz",
-      "integrity": "sha512-obEcM5DvDE4VfX32p21X3Kk5gGo9nbEttm+SEgk4X380SSS5JNWkzjSfWLBYQnZ+9pI2BKsuISbymeH1P68dbg==",
-      "requires": {
-        "classnames": "^2.2.6",
-        "debounce": "^1.2.0",
-        "easy-bem": "^1.0.2"
-      }
-    },
     "vue-cli-plugin-vuetify": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.4.2.tgz",
@@ -11924,6 +11983,14 @@
         }
       }
     },
+    "vue-cropperjs": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/vue-cropperjs/-/vue-cropperjs-4.2.0.tgz",
+      "integrity": "sha512-dvwCBtjGMiznkNIK2GFd1SQm1x+wmtWg4g4t+NrJSPj/fpHnubXxAUOIvY7lMFeR2lawRLsigCaGZrcXCzuTKA==",
+      "requires": {
+        "cropperjs": "^1.5.6"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.10.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.10.0.tgz",
@@ -11983,87 +12050,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.8.3",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
-      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
-          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-script2": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/vue-script2/-/vue-script2-2.1.0.tgz",

package.json

@@ -11,7 +11,7 @@
     "core-js": "^3.6.5",
     "file-saver": "^2.0.5",
     "vue": "^2.6.11",
-    "vue-advanced-cropper": "^1.10.1",
+    "vue-cropperjs": "^4.2.0",
     "vue-google-adsense": "^1.10.1",
     "vue-script2": "^2.1.0",
     "vuetify": "^2.4.0"

src/components/CardDesigner.vue

@@ -1,148 +1,116 @@
 <template>
   <div>
-    <Intro header="Card Designer" body="This Tool is currently being build..." />
+    <Intro header="Card Designer" body="This Tool is currently being built...<br />Mobile cropper might behave weird. " />
     <v-row justify="center" class="pa-10">
       <div class="button-wrapper">
-        <v-btn class="button" @click="$refs.file.click()">
+        <input
-          <input v-show="false" type="file" ref="file" @change="loadImage($event)" accept="image/*">
+          ref="input"
-          Load image
+          type="file"
+          name="image"
+          accept="image/*"
+          @change="setImage"
+        />
+        <v-btn class="button ma-10" @click="showFileChooser()">
+          Open Image
         </v-btn>
       </div>
     </v-row>
-    <v-row justify="center" class="pa-10">
+    <v-row justify="center">
-      <cropper ref="cropper"
+     
-        class="cropper"
+      <section class="cropper-area">
-        @change="onChange"
+        <div class="img-cropper">
-        :debounce="false"
+          <vue-cropper
-        :src="image.src"
+            ref="cropper"
-        :stencil-props="{
+            :src="imgSrc"
-        handlers: {},
+            preview=".custom-preview"
-        movable: false,
+            :viewMode="2"
-        scalable: false,
+            :zoomable="true"
-        aspectRatio: 300/500,
+            :aspectRatio="3/5"
-        }"
-        :resize-image="{
-          adjustStencil: false
-        }"
-        image-restriction="stencil" 
           />
+        </div>
+      </section>
+
+      <section class="preview-area">
         <div class="card-container">
           <img id="frame" src="../assets/cards/overlay.png" alt="">
-        <Preview id="card"
+          <div class="custom-preview" />
-          :image="result.image" 
-          :coordinates="result.coordinates"
-
-        />
-        <div id="card" :style="{ backgroundImage : 'url(' + result.image + ')' }"></div>
         </div>
-      <v-btn class="button ma-10" @click="crop()">
+        <v-btn class="button ma-10" @click="cropImage()">
           Save Image
         </v-btn>
-
+      </section>
     </v-row>
   </div>
 </template>
 
 <script>
-import { Cropper, Preview } from 'vue-advanced-cropper';
+
-import 'vue-advanced-cropper/dist/style.css';
 import { saveAs } from 'file-saver';
 import Intro from './Intro.vue';
+import VueCropper from 'vue-cropperjs';
+import 'cropperjs/dist/cropper.css';
 
 // This function is used to detect the actual image type, 
-function getMimeType(file, fallback = null) {
-  const byteArray = (new Uint8Array(file)).subarray(0, 4);
-    let header = '';
-    for (let i = 0; i < byteArray.length; i++) {
-       header += byteArray[i].toString(16);
-    }
-  switch (header) {
-        case "89504e47":
-            return "image/png";
-        case "47494638":
-            return "image/gif";
-        case "ffd8ffe0":
-        case "ffd8ffe1":
-        case "ffd8ffe2":
-        case "ffd8ffe3":
-        case "ffd8ffe8":
-            return "image/jpeg";
-        default:
-            return fallback;
-    }
-}
 
 export default {
   components: {
-    Cropper, Preview, Intro
+    VueCropper, Intro
   },
   data: () => ({
-    image: {
+    imgSrc: require("../assets/cards/akashi_placeholder.jpg"),
-      src: null,
+    cropImg: '',
-      type: null
+    data: null
-    },
-    result: {
-      coordinates: null,
-      image: null,
-      dataUrl: null
-    }
   }),
   methods: {
+    cropImage() {
+      // get image data for post processing, e.g. upload or setting image src
+      this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
+      this.$refs.cropper.getCroppedCanvas().toBlob(blob => {
+        let i = new FormData()
+        i.append('picture', blob)    
+        console.log(i)
+        saveAs(blob, "custom-card");
+      })
+
+    },
     crop() {
 			const { canvas } = this.$refs.cropper.getResult();
 			canvas.toBlob((blob) => {
 				saveAs(blob);
 			}, this.image.type);
 		},
-    onChange({ coordinates, image }) {
+
-			this.result = {
-				coordinates,
-				image
-			};
-		},
     reset() {
       this.image = {
         src: null,
         type: null
       }
     },
-    loadImage(event) {
+    setImage(e) {
-      // Reference to the DOM input element
+      const file = e.target.files[0];
-      const { files } = event.target;
+
-      // Ensure that you have a file before attempting to read it
+      if (file.type.indexOf('image/') === -1) {
-      if (files && files[0]) {
+        alert('Please select an image file');
-        // 1. Revoke the object URL, to allow the garbage collector to destroy the uploaded before file
+        return;
-        if (this.image.src) {
-          URL.revokeObjectURL(this.image.src)
       }
-        // 2. Create the blob link to the file to optimize performance:
-        const blob = URL.createObjectURL(files[0]);
 
-        // 3. The steps below are designated to determine a file mime type to use it during the 
+      if (typeof FileReader === 'function') {
-        // getting of a cropped image from the canvas. You can replace it them by the following string, 
-        // but the type will be derived from the extension and it can lead to an incorrect result:
-        //
-        // this.image = {
-        //    src: blob;
-        //    type: files[0].type
-        // }
-        
-        // Create a new FileReader to read this image binary data
         const reader = new FileReader();
-        // Define a callback function to run, when FileReader finishes its job
+
-        reader.onload = (e) => {
+        reader.onload = (event) => {
-          // Note: arrow function used here, so that "this.image" refers to the image of Vue component
+          this.imgSrc = event.target.result;
-          this.image = {
+          // rebuild cropperjs with the updated source
-            // Set the image source (it will look like blob:http://example.com/2c5270a5-18b5-406e-a4fb-07427f5e7b94)
+          this.$refs.cropper.replace(event.target.result);
-            src: blob,
-            // Determine the image type to preserve it during the extracting the image from canvas:
-            type: getMimeType(e.target.result, files[0].type),
         };
-        };
+
-        // Start the reader job - read file as a data url (base64 format)
+        reader.readAsDataURL(file);
-        reader.readAsArrayBuffer(files[0]);
+      } else {
+        alert('Sorry, FileReader API not supported');
       }
     },
+    showFileChooser() {
+      this.$refs.input.click();
+    }
   },
   destroyed() {
     // Revoke the object URL, to allow the garbage collector to destroy the uploaded before file
@@ -155,11 +123,18 @@ export default {
 
 <style scoped lang="scss">
 //FIXME: Outsource styles
-.cropper {
+.img-cropper {
-  min-height: 500px;
+  max-width: 50%;
-  max-height: 600px;
+}
-  max-width: 400px;
+
-  background: transparent;
+input[type="file"] {
+  display: none;
+}
+
+.custom-preview {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
 }
 
 .button-wrapper {