fix: allow webp images to be processed and not just generated

Author: carlalexander

index.js

@@ -26,7 +26,7 @@ exports.handler = async (event) => {
       return response;
     }
 
-    const allowedContentTypes = ['image/gif', 'image/jpeg', 'image/png'];
+    const allowedContentTypes = ['image/gif', 'image/jpeg', 'image/png', 'image/webp'];
     const key = decodeURIComponent(request.uri.substring(1));
     const objectResponse = await fetchOriginalImageFromS3(bucketInfo, key);
 

tests/image-processing-integration.test.js

@@ -49,6 +49,17 @@ describe('Image Processing Integration', () => {
     })
       .gif()
       .toFile(path.join(fixturesDir, 'test-image.gif'));
+
+    await sharp({
+      create: {
+        width: 400,
+        height: 300,
+        channels: 3,
+        background: { r: 0, g: 0, b: 255 },
+      },
+    })
+      .webp()
+      .toFile(path.join(fixturesDir, 'test-image.webp'));
   });
 
   beforeEach(() => {
@@ -75,6 +86,15 @@ describe('Image Processing Integration', () => {
               },
             },
           };
+        } else if (key === 'test-image.webp') {
+          return {
+            ContentType: 'image/webp',
+            Body: {
+              [Symbol.asyncIterator]: function* () {
+                yield fs.readFileSync(path.join(fixturesDir, 'test-image.webp'));
+              },
+            },
+          };
         } else if (key === 'animated.gif') {
           return {
             ContentType: 'image/gif',
@@ -369,4 +389,105 @@ describe('Image Processing Integration', () => {
     expect(lastS3ClientConfiguration.region).toBe('us-west-2');
     expect(lastS3GetObjectCommandInput.Bucket).toBe('my-test-bucket');
   });
+
+  test('should process WebP images as input format', async () => {
+    const event = createCloudFrontEvent({
+      uri: '/test-image.webp',
+      region: 'us-west-2',
+      bucket: 'my-test-bucket',
+    });
+
+    const response = await handler(event);
+
+    expect(response.status).toBe('200');
+    expect(response.bodyEncoding).toBe('base64');
+
+    const responseBuffer = Buffer.from(response.body, 'base64');
+    const metadata = await sharp(responseBuffer).metadata();
+
+    expect(metadata.format).toBe('webp');
+    expect(metadata.width).toBe(400);
+    expect(metadata.height).toBe(300);
+
+    expect(lastS3ClientConfiguration.region).toBe('us-west-2');
+    expect(lastS3GetObjectCommandInput.Bucket).toBe('my-test-bucket');
+  });
+
+  test('should resize WebP images', async () => {
+    const event = createCloudFrontEvent({
+      uri: '/test-image.webp',
+      querystring: 'width=200',
+      region: 'us-west-2',
+      bucket: 'my-test-bucket',
+    });
+
+    const response = await handler(event);
+
+    expect(response.status).toBe('200');
+    expect(response.bodyEncoding).toBe('base64');
+
+    const responseBuffer = Buffer.from(response.body, 'base64');
+    const metadata = await sharp(responseBuffer).metadata();
+
+    expect(metadata.format).toBe('webp');
+    expect(metadata.width).toBe(200);
+    expect(metadata.height).toBe(150);
+
+    expect(lastS3ClientConfiguration.region).toBe('us-west-2');
+    expect(lastS3GetObjectCommandInput.Bucket).toBe('my-test-bucket');
+  });
+
+  test('should convert WebP to other formats', async () => {
+    const event = createCloudFrontEvent({
+      uri: '/test-image.webp',
+      querystring: 'format=jpeg',
+      region: 'us-west-2',
+      bucket: 'my-test-bucket',
+    });
+
+    const response = await handler(event);
+
+    expect(response.status).toBe('200');
+    expect(response.bodyEncoding).toBe('base64');
+
+    expect(response.headers['content-type']).toEqual([
+      { key: 'Content-Type', value: 'image/jpeg' },
+    ]);
+
+    const responseBuffer = Buffer.from(response.body, 'base64');
+    const metadata = await sharp(responseBuffer).metadata();
+
+    expect(metadata.format).toBe('jpeg');
+    expect(metadata.width).toBe(400);
+    expect(metadata.height).toBe(300);
+
+    expect(lastS3ClientConfiguration.region).toBe('us-west-2');
+    expect(lastS3GetObjectCommandInput.Bucket).toBe('my-test-bucket');
+  });
+
+  test('should resize and convert WebP images simultaneously', async () => {
+    const event = createCloudFrontEvent({
+      uri: '/test-image.webp',
+      querystring: 'width=300&format=png',
+      region: 'us-west-2',
+      bucket: 'my-test-bucket',
+    });
+
+    const response = await handler(event);
+
+    expect(response.status).toBe('200');
+    expect(response.bodyEncoding).toBe('base64');
+
+    expect(response.headers['content-type']).toEqual([{ key: 'Content-Type', value: 'image/png' }]);
+
+    const responseBuffer = Buffer.from(response.body, 'base64');
+    const metadata = await sharp(responseBuffer).metadata();
+
+    expect(metadata.format).toBe('png');
+    expect(metadata.width).toBe(300);
+    expect(metadata.height).toBe(225);
+
+    expect(lastS3ClientConfiguration.region).toBe('us-west-2');
+    expect(lastS3GetObjectCommandInput.Bucket).toBe('my-test-bucket');
+  });
 });

tests/image-processing.test.js

@@ -232,4 +232,57 @@ describe('Image Processing Unit Tests', () => {
 
     expect(response).toBe(originalResponse);
   });
+
+  test('should process WebP images as input format', async () => {
+    const webpBuffer = Buffer.from('fake-webp-data');
+
+    mockS3Send.mockResolvedValueOnce({
+      ContentType: 'image/webp',
+      Body: {
+        [Symbol.asyncIterator]: async function* () {
+          yield webpBuffer;
+        },
+      },
+    });
+
+    const event = createCloudFrontEvent({
+      uri: '/test-image.webp',
+      querystring: 'width=100',
+    });
+
+    const response = await handler(event);
+
+    expect(response.status).toBe('200');
+    expect(response.bodyEncoding).toBe('base64');
+    expect(sharp().resize).toHaveBeenCalledWith({
+      width: 100,
+      height: null,
+      fit: 'inside',
+      withoutEnlargement: true,
+    });
+  });
+
+  test('should convert WebP input to different output format', async () => {
+    const webpBuffer = Buffer.from('fake-webp-data');
+
+    mockS3Send.mockResolvedValueOnce({
+      ContentType: 'image/webp',
+      Body: {
+        [Symbol.asyncIterator]: async function* () {
+          yield webpBuffer;
+        },
+      },
+    });
+
+    const event = createCloudFrontEvent({
+      uri: '/test-image.webp',
+      querystring: 'format=png',
+    });
+
+    const response = await handler(event);
+
+    expect(response.status).toBe('200');
+    expect(response.headers['content-type']).toEqual([{ key: 'Content-Type', value: 'image/png' }]);
+    expect(sharp().png).toHaveBeenCalled();
+  });
 });