Added ThumbHash to user images

.vscode/settings.json

@@ -18,6 +18,7 @@
     "Ruleset",
     "snackbars",
     "Spellcasting",
+    "thumbhash",
     "uncomputed",
     "vuetify",
     "Vuex",

app/imports/client/ui/components/ImageUploadInput.vue

@@ -33,6 +33,7 @@
 
 <script lang="js">
 import UserImages from '/imports/api/files/userImages/UserImages';
+import getThumbHash from '/imports/client/ui/utility/getThumbHash.js'
 
 export default {
   data(){return {
@@ -42,20 +43,34 @@ export default {
     fileUploadError: undefined,
   }},
   watch: {
-    file(file){
+    async file(file){
       if (!file) return;
       let self = this;
+      let thumbHash = undefined;
+
+      // Start the loading state here, because we are loading and processing the image into
+      // a thumb hash
+      self.uploadingInProgress = true;
+      self.uploadIndeterminate = true;
+
+      // ThumbHashes are nice to have, but don't break upload if they fail
+      try {
+        thumbHash = await getThumbHash(file);
+      } catch (e) {
+        console.error('Failed to generate thumbHash')
+        console.error(e);
+      }
+
+      // Start the image insert process
       let uploadInstance = UserImages.insert({
         file: file,
         chunkSize: 'dynamic',
         allowWebWorkers: true,
         meta: {
           createdAt: new Date(),
+          thumbHash,
         },
-      }, false)
-
-      self.uploadingInProgress = true;
-      self.uploadIndeterminate = true;
+      }, false);
 
       uploadInstance.on('start', function () {
         self.progress = 0;
@@ -68,15 +83,11 @@ export default {
       });
 
       uploadInstance.on('uploaded', function (error, fileObj) {
-        // Remove the file from the input box
-        self.file = undefined;
         self.resetState();
         self.progress = 0;
       });
 
       uploadInstance.on('error', function (error, fileObj) {
-        // Remove the file from the input box
-        self.file = undefined;
         self.resetState();
         this.fileUploadError = error.reason || error.message || error.toString();
       });
@@ -99,9 +110,12 @@ export default {
       return;
     },
     resetState() {
+      // Remove file from input
       this.file = undefined;
+      // stop progress
       this.uploadingInProgress = false;
       this.progress = 0;
+      // Remove errors
       this.fileUploadError = undefined;
     },
   },

app/imports/client/ui/files/userImages/UserImageCard.vue

@@ -4,6 +4,7 @@
     @click="previewImage"
   >
     <v-img
+      :lazy-src="thumbHashDataUrl"
       :src="model.link"
       :data-id="`${model._id}-image`"
     />
@@ -50,6 +51,7 @@
 <script lang="js">
 import { snackbar } from '/imports/client/ui/components/snackbars/SnackbarQueue';
 import removeUserImage from '/imports/api/files/userImages/methods/removeUserImage';
+import { thumbHashToDataURL } from 'thumbhash';
 
 export default {
   props: {
@@ -63,6 +65,13 @@ export default {
       removeLoading: false,
     }
   },
+  computed: {
+    thumbHashDataUrl() {
+      const thumbHash = this.model.meta?.thumbHash;
+      if (!thumbHash) return;
+      return thumbHashToDataURL(thumbHash);
+    }
+  },
   methods: {
     removeUserFile() {
       this.removeLoading = true;

app/imports/client/ui/utility/getThumbHash.js

@@ -0,0 +1,14 @@
+import * as ThumbHash from 'thumbhash';
+
+export default async function getThumbHash(file) {
+  const image = await createImageBitmap(file);
+  const canvas = document.createElement('canvas')
+  const context = canvas.getContext('2d')
+  if (!context) throw new Error('Could not get context');
+  const scale = 100 / Math.max(image.width, image.height)
+  canvas.width = Math.round(image.width * scale)
+  canvas.height = Math.round(image.height * scale)
+  context.drawImage(image, 0, 0, canvas.width, canvas.height)
+  const pixels = context.getImageData(0, 0, canvas.width, canvas.height)
+  return ThumbHash.rgbaToThumbHash(pixels.width, pixels.height, pixels.data)
+}

app/imports/server/imageProcessing/createThumbnail.js

@@ -1,8 +0,0 @@
-import * as sharp from 'sharp';
-
-export default async function createThumbnail(image) {
-  await sharp(image)
-  .resize(320, 240)
-  .png()
-  .toBuffer();
-}

app/package-lock.json

@@ -7941,6 +7941,11 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "thumbhash": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/thumbhash/-/thumbhash-0.1.1.tgz",
+      "integrity": "sha512-kH5pKeIIBPQXAOni2AiY/Cu/NKdkFREdpH+TLdM0g6WA7RriCv0kPLgP731ady67MhTAqrVG/4mnEeibVuCJcg=="
+    },
     "to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

app/package.json

@@ -56,6 +56,7 @@
     "simpl-schema": "^1.13.1",
     "source-map-support": "^0.5.21",
     "speakingurl": "^14.0.1",
+    "thumbhash": "^0.1.1",
     "vivagraphjs": "^0.12.0",
     "vue": "2.6.14",
     "vue-meteor-tracker": "^2.0.0",