feat: use jsquash for webp encoding

Author: evan6seven

package-lock.json

@@ -25,7 +25,7 @@
   "license": "MIT",
   "dependencies": {
     "@iarna/toml": "2.2.5",
-    "@silvia-odwyer/photon": "0.3.3",
+    "@jsquash/webp": "1.5.0",
     "@vercel/stega": "^0.1.2",
     "ajv": "^8.17.1",
     "ajv-errors": "^3.0.0",

packages/decap-cms-core/package.json

@@ -7,52 +7,42 @@ import {
   transformImage,
 } from '../imageTransformations';
 
-const mockOriginalImage = {
-  get_width: jest.fn(() => 400),
-  get_height: jest.fn(() => 300),
-  get_bytes_webp: jest.fn(() => new Uint8Array([1, 2, 3])),
-  get_bytes_jpeg: jest.fn(() => new Uint8Array([4, 5, 6])),
-  get_bytes: jest.fn(() => new Uint8Array([7, 8, 9])),
-  free: jest.fn(),
-};
-const mockCroppedImage = {
-  get_width: jest.fn(() => 400),
-  get_height: jest.fn(() => 225),
-  get_bytes_webp: jest.fn(() => new Uint8Array([10, 11, 12])),
-  get_bytes_jpeg: jest.fn(() => new Uint8Array([13, 14, 15])),
-  get_bytes: jest.fn(() => new Uint8Array([16, 17, 18])),
-  free: jest.fn(),
-};
-const mockResizedImage = {
-  get_width: jest.fn(() => 160),
-  get_height: jest.fn(() => 90),
-  get_bytes_webp: jest.fn(() => new Uint8Array([19, 20, 21])),
-  get_bytes_jpeg: jest.fn(() => new Uint8Array([22, 23, 24])),
-  get_bytes: jest.fn(() => new Uint8Array([25, 26, 27])),
-  free: jest.fn(),
-};
-const mockNewFromByteslice = jest.fn(() => mockOriginalImage);
-const mockCrop = jest.fn(() => mockCroppedImage);
-const mockResize = jest.fn(() => mockResizedImage);
-
-jest.mock(
-  '@silvia-odwyer/photon',
-  () => ({
-    __esModule: true,
-    default: jest.fn(() => Promise.resolve()),
-    PhotonImage: {
-      new_from_byteslice: mockNewFromByteslice,
-    },
-    crop: mockCrop,
-    resize: mockResize,
-    SamplingFilter: { Lanczos3: 'Lanczos3' },
-  }),
-  { virtual: true },
-);
+const mockEncodeWebp = jest.fn(() => Promise.resolve(new ArrayBuffer(3)));
+const mockCloseImage = jest.fn();
+const mockDrawImage = jest.fn();
+const mockImageData = { width: 160, height: 90, data: new Uint8ClampedArray(160 * 90 * 4) };
+const mockGetImageData = jest.fn(() => mockImageData);
+const mockToBlob = jest.fn(callback => callback(new Blob(['encoded'], { type: 'image/jpeg' })));
+
+jest.mock('@jsquash/webp', () => ({ encode: mockEncodeWebp }), { virtual: true });
 
 describe('imageTransformations', () => {
+  const originalCreateImageBitmap = global.createImageBitmap;
+  const originalCreateElement = document.createElement;
+
   beforeEach(() => {
     jest.clearAllMocks();
+    global.createImageBitmap = jest.fn(() =>
+      Promise.resolve({
+        width: 400,
+        height: 300,
+        close: mockCloseImage,
+      } as unknown as ImageBitmap),
+    );
+    document.createElement = jest.fn(() => ({
+      width: 0,
+      height: 0,
+      getContext: jest.fn(() => ({
+        drawImage: mockDrawImage,
+        getImageData: mockGetImageData,
+      })),
+      toBlob: mockToBlob,
+    })) as unknown as typeof document.createElement;
+  });
+
+  afterEach(() => {
+    global.createImageBitmap = originalCreateImageBitmap;
+    document.createElement = originalCreateElement;
   });
 
   describe('getMediaProcessingConfig', () => {
@@ -180,7 +170,7 @@ describe('imageTransformations', () => {
   });
 
   describe('transformImage', () => {
-    it('encodes one processed image with Photon and strips metadata by re-encoding', async () => {
+    it('encodes webp with jSquash and strips metadata by re-encoding', async () => {
       const file = new File(['original'], 'kittens.jpg', { type: 'image/jpeg' });
       const files = await transformImage(file, 'static/media/kittens.jpg', {
         format: 'webp',
@@ -194,13 +184,37 @@ describe('imageTransformations', () => {
       expect(files[0].file.name).toBe('kittens.webp');
       expect(files[0].file.type).toBe('image/webp');
       expect(files[0].path).toBe('static/media/kittens.webp');
-      expect(mockNewFromByteslice).toHaveBeenCalledWith(expect.any(Uint8Array));
-      expect(mockCrop).toHaveBeenCalledWith(mockOriginalImage, 0, 38, 400, 263);
-      expect(mockResize).toHaveBeenCalledWith(mockCroppedImage, 160, 90, 'Lanczos3');
-      expect(mockResizedImage.get_bytes_webp).toHaveBeenCalledTimes(1);
-      expect(mockOriginalImage.free).toHaveBeenCalledTimes(1);
-      expect(mockCroppedImage.free).toHaveBeenCalledTimes(1);
-      expect(mockResizedImage.free).toHaveBeenCalledTimes(1);
+      expect(mockDrawImage).toHaveBeenCalledWith(
+        expect.any(Object),
+        0,
+        38,
+        400,
+        225,
+        0,
+        0,
+        160,
+        90,
+      );
+      expect(mockGetImageData).toHaveBeenCalledWith(0, 0, 160, 90);
+      expect(mockEncodeWebp).toHaveBeenCalledWith(mockImageData, { quality: 80 });
+      expect(mockCloseImage).toHaveBeenCalledTimes(1);
+    });
+
+    it('encodes jpeg with canvas', async () => {
+      const file = new File(['original'], 'kittens.png', { type: 'image/png' });
+      const files = await transformImage(file, 'static/media/kittens.png', {
+        format: 'jpeg',
+        quality: 0.7,
+        width: null,
+        height: null,
+        aspectRatio: null,
+      });
+
+      expect(files[0].file.name).toBe('kittens.jpg');
+      expect(files[0].file.type).toBe('image/jpeg');
+      expect(files[0].path).toBe('static/media/kittens.jpg');
+      expect(mockToBlob).toHaveBeenCalledWith(expect.any(Function), 'image/jpeg', 0.7);
+      expect(mockEncodeWebp).not.toHaveBeenCalled();
     });
   });
 });

packages/decap-cms-core/src/lib/__tests__/imageTransformations.spec.ts

@@ -1,11 +1,7 @@
 import { basename, fileExtension, fileExtensionWithSeparator } from 'decap-cms-lib-util';
 
-import type * as Photon from '@silvia-odwyer/photon';
 import type { CmsMediaProcessing, EntryField } from '../types/redux';
 
-type PhotonImage = InstanceType<typeof Photon.PhotonImage>;
-type PhotonModule = typeof Photon & { default: () => Promise<unknown> };
-
 export type MediaProcessingConfig = {
   format?: 'jpeg' | 'webp';
   quality?: number;
@@ -191,33 +187,50 @@ function getSourceCrop(sourceWidth: number, sourceHeight: number, aspectRatio?:
   return { x: 0, y: Math.round((sourceHeight - height) / 2), width: sourceWidth, height };
 }
 
-async function getFileBytes(file: File) {
-  if (typeof file.arrayBuffer === 'function') {
-    return new Uint8Array(await file.arrayBuffer());
+function loadImage(file: File) {
+  if (typeof createImageBitmap === 'function') {
+    return createImageBitmap(file);
   }
 
-  return new Promise<Uint8Array>((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => resolve(new Uint8Array(reader.result as ArrayBuffer));
-    reader.onerror = () => reject(reader.error);
-    reader.readAsArrayBuffer(file);
+  return new Promise<HTMLImageElement>((resolve, reject) => {
+    const url = URL.createObjectURL(file);
+    const image = new Image();
+    image.onload = () => {
+      URL.revokeObjectURL(url);
+      resolve(image);
+    };
+    image.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error(`Failed to load image '${file.name}'`));
+    };
+    image.src = url;
   });
 }
 
-function getImageBytes(image: PhotonImage, format: string, quality = 0.75) {
-  if (format === 'jpeg') {
-    return image.get_bytes_jpeg(Math.round(quality * 100));
-  }
-
+async function encodeImageData(imageData: ImageData, format: string, quality = 0.75) {
   if (format === 'webp') {
-    return image.get_bytes_webp();
+    const { encode } = await import('@jsquash/webp');
+    return encode(imageData, { quality: Math.round(quality * 100) });
   }
 
-  if (format === 'png') {
-    return image.get_bytes();
-  }
+  throw new Error(`ImageData encoding is not supported for '${format}'`);
+}
 
-  throw new Error(`Photon does not support encoding images as '${format}'`);
+function encodeCanvas(canvas: HTMLCanvasElement, format: string, quality = 0.75) {
+  return new Promise<Blob>((resolve, reject) => {
+    canvas.toBlob(
+      blob => {
+        if (!blob) {
+          reject(new Error(`Failed to encode image as '${format}'`));
+          return;
+        }
+
+        resolve(blob);
+      },
+      getMimeType(format),
+      quality,
+    );
+  });
 }
 
 export async function transformImage(
@@ -227,42 +240,34 @@ export async function transformImage(
 ): Promise<ImageTransformationFile[]> {
   const outputFormat = getOutputFormat(file.name, config);
   const mimeType = getMimeType(outputFormat);
-  const photon = (await import('@silvia-odwyer/photon')) as unknown as PhotonModule;
-  await photon.default();
-
-  const imageBytes = await getFileBytes(file);
-  const originalImage = photon.PhotonImage.new_from_byteslice(imageBytes);
-  const imagesToFree: PhotonImage[] = [originalImage];
-
-  try {
-    const sourceWidth = originalImage.get_width();
-    const sourceHeight = originalImage.get_height();
-    const crop = getSourceCrop(sourceWidth, sourceHeight, config.aspectRatio);
-    const croppedImage =
-      crop.x === 0 && crop.y === 0 && crop.width === sourceWidth && crop.height === sourceHeight
-        ? originalImage
-        : photon.crop(originalImage, crop.x, crop.y, crop.x + crop.width, crop.y + crop.height);
-
-    if (croppedImage !== originalImage) {
-      imagesToFree.push(croppedImage);
-    }
-
-    const { width, height } = getTargetDimensions(crop.width, crop.height, config);
-    const processedImage =
-      width === croppedImage.get_width() && height === croppedImage.get_height()
-        ? croppedImage
-        : photon.resize(croppedImage, width, height, photon.SamplingFilter.Lanczos3);
-
-    if (processedImage !== croppedImage) {
-      imagesToFree.push(processedImage);
-    }
-
-    const bytes = getImageBytes(processedImage, outputFormat, config.quality);
-    const fileName = getMediaProcessingFileName(file.name, config);
-    const transformedFile = new File([bytes], fileName, { type: mimeType });
-
-    return [{ file: transformedFile, path: getProcessedPath(originalPath, fileName) }];
-  } finally {
-    imagesToFree.forEach(image => image.free());
+  const image = await loadImage(file);
+  const crop = getSourceCrop(image.width, image.height, config.aspectRatio);
+  const { width, height } = getTargetDimensions(crop.width, crop.height, config);
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+
+  if (!context) {
+    throw new Error('Canvas 2D context is not available');
   }
+
+  canvas.width = width;
+  canvas.height = height;
+  context.drawImage(image, crop.x, crop.y, crop.width, crop.height, 0, 0, width, height);
+
+  if ('close' in image && typeof image.close === 'function') {
+    image.close();
+  }
+
+  const encoded =
+    outputFormat === 'webp'
+      ? await encodeImageData(
+          context.getImageData(0, 0, width, height),
+          outputFormat,
+          config.quality,
+        )
+      : await encodeCanvas(canvas, outputFormat, config.quality);
+  const fileName = getMediaProcessingFileName(file.name, config);
+  const transformedFile = new File([encoded], fileName, { type: mimeType });
+
+  return [{ file: transformedFile, path: getProcessedPath(originalPath, fileName) }];
 }