feat(thumbhash): rewrote thumbhash with native nodejs/ts implementation

- added `/filters:thumbhash()/` to trigger this feature
stroeer · Jul 15, 2024 · de55039 · de55039
1 parent a008020
commit de55039
Show file tree

Hide file tree

Showing 7 changed files with 410 additions and 8 deletions.
diff --git a/source/image-handler/package.json b/source/image-handler/package.json
@@ -10,8 +10,7 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "3.614.0",
-    "sharp": "0.33.4",
-    "thumbhash": "^0.1.1"
+    "sharp": "0.33.4"
   },
   "devDependencies": {
     "@aws-lambda-powertools/logger": "2.4.0",

diff --git a/source/image-handler/src/image-handler.ts b/source/image-handler/src/image-handler.ts
@@ -13,6 +13,7 @@ import {
   StatusCodes,
 } from './lib';
 import { S3 } from '@aws-sdk/client-s3';
+import { rgbaToThumbHash, thumbHashToDataURL } from './lib/thumbhash';
 
 export class ImageHandler {
   private readonly LAMBDA_PAYLOAD_LIMIT = 6 * 1024 * 1024;
@@ -100,11 +101,15 @@ export class ImageHandler {
 
       // apply image edits
       let modifiedImage = await this.applyEdits(image, edits, options.animated);
-      // modify image output if requested
-      modifiedImage = this.modifyImageOutput(modifiedImage, imageRequestInfo);
-      // convert to base64 encoded string
-      const imageBuffer = await modifiedImage.toBuffer();
-      base64EncodedImage = imageBuffer.toString('base64');
+      if ('thumbhash' in edits) {
+        base64EncodedImage = await this.thumbhash(modifiedImage, imageRequestInfo);
+      } else {
+        // modify image output if requested
+        modifiedImage = this.modifyImageOutput(modifiedImage, imageRequestInfo);
+        // convert to base64 encoded string
+        const imageBuffer = await modifiedImage.toBuffer();
+        base64EncodedImage = imageBuffer.toString('base64');
+      }
     } else {
       // convert image to Sharp and change output format if specified
       let image = await this.instantiateSharpImage(originalImage, edits, options);
@@ -153,6 +158,10 @@ export class ImageHandler {
         case 'animated': {
           break;
         }
+        case 'thumbhash': {
+          originalImage.resize(100, 100, { fit: 'inside' });
+          break;
+        }
         default: {
           if (edit in originalImage) {
             originalImage[edit](edits[edit]);
@@ -325,4 +334,18 @@ export class ImageHandler {
         );
     }
   }
+
+  private async thumbhash(image: sharp.Sharp, imageRequestInfo: ImageRequestInfo): Promise<string> {
+    const { data, info } = await image.ensureAlpha().raw().toBuffer({ resolveWithObject: true });
+    const binaryThumbHash = rgbaToThumbHash(info.width, info.height, data);
+
+    imageRequestInfo.contentType = ContentTypes.JSON;
+    imageRequestInfo.cacheControl = 'max-age=3600';
+    return Buffer.from(
+      JSON.stringify({
+        base64: Buffer.from(binaryThumbHash).toString('base64'),
+        // base64_url: thumbHashToDataURL(binaryThumbHash), // debugging thedata:image/png;base64 if required, will be done in the frontend
+      }),
+    ).toString('base64');
+  }
 }
diff --git a/source/image-handler/src/lib/enums.ts b/source/image-handler/src/lib/enums.ts
@@ -46,4 +46,5 @@ export enum ContentTypes {
   GIF = 'image/gif',
   SVG = 'image/svg+xml',
   AVIF = 'image/avif',
+  JSON = 'application/json',
 }