Add image compression (WIP)

webapp/components/ContributionForm/ContributionForm.vue

@@ -187,6 +187,7 @@
   </div>
 </template>
 <script>
+import imageCompression from 'browser-image-compression'
 import gql from 'graphql-tag'
 import { mapGetters } from 'vuex'
 import { urlToBlob } from 'image-resize-compress'
@@ -437,8 +438,15 @@ export default {
               return null
             }
             const blob = await urlToBlob(src[1])
+
+            const compressedBlob = imageCompression(blob, {
+              quality: 0.8,
+              maxWidth: 1920,
+              maxHeight: 1080,
+            })
+
             return {
-              upload: blob,
+              upload: compressedBlob,
               name: filename[1],
               type: 'image/jpeg',
             }

webapp/package.json

@@ -34,6 +34,7 @@
     "accounting": "~0.4.1",
     "apollo-cache-inmemory": "~1.6.6",
     "apollo-client": "~2.6.10",
+    "browser-image-compression": "^2.0.2",
     "cookie-universal-nuxt": "~2.2.2",
     "cropperjs": "^1.6.2",
     "cross-env": "~7.0.3",

webapp/yarn.lock

@@ -6766,6 +6766,13 @@ brorand@^1.0.1, brorand@^1.1.0:
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
   integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
 
+browser-image-compression@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/browser-image-compression/-/browser-image-compression-2.0.2.tgz#4d5ef8882e9e471d6d923715ceb9034499d14eaa"
+  integrity sha512-pBLlQyUf6yB8SmmngrcOw3EoS4RpQ1BcylI3T9Yqn7+4nrQTXJD4sJDe5ODnJdrvNMaio5OicFo75rDyJD2Ucw==
+  dependencies:
+    uzip "0.20201231.0"
+
 browser-process-hrtime@^0.1.2:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-0.1.3.tgz#616f00faef1df7ec1b5bf9cfe2bdc3170f26c7b4"
@@ -19606,6 +19613,11 @@ uvu@^0.5.0:
     kleur "^4.0.3"
     sade "^1.7.3"
 
+uzip@0.20201231.0:
+  version "0.20201231.0"
+  resolved "https://registry.yarnpkg.com/uzip/-/uzip-0.20201231.0.tgz#9e64b065b9a8ebf26eb7583fe8e77e1d9a15ed14"
+  integrity sha512-OZeJfZP+R0z9D6TmBgLq2LHzSSptGMGDGigGiEe0pr8UBe/7fdflgHlHBNDASTXB5jnFuxHpNaJywSg8YFeGng==
+
 v-mapbox@^1.11.2:
   version "1.11.2"
   resolved "https://registry.yarnpkg.com/v-mapbox/-/v-mapbox-1.11.2.tgz#35782aabcd66f459c3223ce4cccf6c862d40e0c9"