[WIP] - implement basic image cropping solution

#1466

- co-authored-by: mattwr18 <mattwr18@gmail.com>

webapp/components/TeaserImage/TeaserImage.vue

@@ -5,8 +5,8 @@
     id="postdropzone"
     class="ds-card-image"
     :use-custom-slot="true"
-    @vdropzone-thumbnail="thumbnail"
     @vdropzone-error="verror"
+    @vdropzone-thumbnail="transformImage"
   >
     <div class="dz-message">
       <div
@@ -31,6 +31,8 @@
 
 <script>
 import vueDropzone from 'nuxt-dropzone'
+import Cropper from 'cropperjs'
+import 'cropperjs/dist/cropper.css'
 
 export default {
   components: {
@@ -86,12 +88,52 @@ export default {
           uploadArea.classList.remove('hc-attachments-upload-area-update-post')
         }
         image = new Image()
-        image.src = URL.createObjectURL(file)
+        image.src = dataUrl
         image.classList.add('thumbnail-preview')
         if (thumbnailPreview) return thumbnailElement.replaceChild(image, thumbnailPreview)
         thumbnailElement.appendChild(image)
       }
     },
+    transformImage(file) {
+      let myDropZone = this
+
+      // Create the image editor overlay
+      let editor = document.createElement('div')
+      editor.style.position = 'fixed'
+      editor.style.left = 0
+      editor.style.right = 0
+      editor.style.top = 0
+      editor.style.bottom = 0
+      editor.style.zIndex = 9999
+      editor.style.backgroundColor = '#000'
+
+      // Create the confirm button
+      let confirm = document.createElement('button')
+      confirm.style.position = 'absolute'
+      confirm.style.left = '10px'
+      confirm.style.top = '10px'
+      confirm.style.zIndex = 9999
+      confirm.textContent = 'Confirm'
+      confirm.addEventListener('click', function() {
+        // Get the canvas with image data from Cropper.js
+        let canvas = cropper.getCroppedCanvas()
+        myDropZone.thumbnail(file, canvas.toDataURL())
+
+        // Remove the editor from view
+        editor.parentNode.removeChild(editor)
+      })
+      editor.appendChild(confirm)
+
+      // Load the image
+      let image = new Image()
+      image.src = URL.createObjectURL(file)
+      editor.appendChild(image)
+      // Append the editor to the page
+      document.body.appendChild(editor)
+
+      // Create Cropper.js and pass image
+      let cropper = new Cropper(image, {})
+    },
   },
 }
 </script>

webapp/package.json

@@ -64,6 +64,7 @@
     "cookie-universal-nuxt": "~2.0.18",
     "cross-env": "~6.0.3",
     "date-fns": "2.4.1",
+    "cropperjs": "^1.5.5",
     "express": "~4.17.1",
     "graphql": "~14.5.8",
     "isemail": "^3.2.0",
@@ -133,4 +134,4 @@
     "vue-svg-loader": "~0.12.0",
     "vue-template-compiler": "^2.6.10"
   }
-}
+}

webapp/yarn.lock

@@ -5538,6 +5538,11 @@ create-react-context@^0.2.1:
     fbjs "^0.8.0"
     gud "^1.0.0"
 
+cropperjs@^1.5.5:
+  version "1.5.6"
+  resolved "https://registry.yarnpkg.com/cropperjs/-/cropperjs-1.5.6.tgz#82faf432bec709d828f2f7a96d1179198edaf0e2"
+  integrity sha512-eAgWf4j7sNJIG329qUHIFi17PSV0VtuWyAu9glZSgu/KlQSrfTQOC2zAz+jHGa5fAB+bJldEnQwvJEaJ8zRf5A==
+
 cross-env@~6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-6.0.3.tgz#4256b71e49b3a40637a0ce70768a6ef5c72ae941"
@@ -13618,11 +13623,6 @@ serve-static@1.14.1, serve-static@^1.14.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.1.tgz#666e636dc4f010f7ef29970a88a674320898b2f9"
   integrity sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==
-  dependencies:
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    parseurl "~1.3.3"
-    send "0.17.1"
 
 server-destroy@^1.0.1:
   version "1.0.1"