jazz-tools 0.16.6 → 0.17.0

package/src/media/create-image.test.ts

@@ -0,0 +1,195 @@
+import { FileStream } from "jazz-tools";
+import { createJazzTestAccount } from "jazz-tools/testing";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createImageFactory } from "./create-image.js";
+
+describe("createImage", async () => {
+  const account = await createJazzTestAccount();
+
+  const getImageSize = vi.fn();
+  const getPlaceholderBase64 = vi.fn();
+  const createFileStreamFromSource = vi
+    .fn()
+    .mockResolvedValue(FileStream.create({ owner: account._owner }));
+  const resize = vi.fn();
+
+  const createImage = createImageFactory({
+    getImageSize,
+    getPlaceholderBase64,
+    createFileStreamFromSource,
+    resize,
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should create a single original image if all settings are off", async () => {
+    const imageBlob = new Blob(
+      [Uint8Array.from(OnePixel, (c) => c.charCodeAt(0))],
+      { type: "image/png" },
+    );
+
+    getImageSize.mockResolvedValue({ width: 1, height: 1 });
+
+    const image = await createImage(imageBlob, {
+      owner: account._owner,
+      placeholder: false,
+      progressive: false,
+    });
+
+    expect(image).toBeDefined();
+
+    expect(image.originalSize).toEqual([1, 1]);
+    expect(image.placeholderDataURL).not.toBeDefined();
+    expect(image.progressive).toBe(false);
+    expect(image.original).toBeDefined();
+    expect(image[`1x1`]).toBeDefined();
+    expect(image[`1x1`]).toStrictEqual(image.original);
+  });
+
+  it("should create the image with original and placeholder", async () => {
+    const imageBlob = new Blob(
+      [Uint8Array.from(OnePixel, (c) => c.charCodeAt(0))],
+      { type: "image/png" },
+    );
+
+    getImageSize.mockResolvedValue({ width: 1, height: 1 });
+    getPlaceholderBase64.mockResolvedValue(
+      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
+    );
+
+    const image = await createImage(imageBlob, {
+      owner: account._owner,
+      placeholder: "blur",
+      progressive: false,
+    });
+
+    expect(image).toBeDefined();
+
+    expect(image.originalSize).toEqual([1, 1]);
+    expect(image.placeholderDataURL).toBeDefined();
+    expect(image.progressive).toBe(false);
+    expect(image.original).toBeDefined();
+  });
+
+  it("should create a resized image if maxSize is set", async () => {
+    const imageBlob = new Blob(
+      [Uint8Array.from(White1920, (c) => c.charCodeAt(0))],
+      { type: "image/png" },
+    );
+
+    getImageSize.mockResolvedValue({ width: 1920, height: 400 });
+    resize.mockResolvedValue(new Blob([White1920], { type: "image/png" }));
+
+    const image = await createImage(imageBlob, {
+      owner: account._owner,
+      placeholder: false,
+      progressive: false,
+      maxSize: 256,
+    });
+
+    expect(image).toBeDefined();
+
+    expect(image.originalSize).toEqual([256, 53]);
+    expect(image.placeholderDataURL).not.toBeDefined();
+    expect(image.progressive).toBe(false);
+    expect(image.original).toBeDefined();
+    expect(image[`256x53`]).toStrictEqual(image.original);
+
+    expect(resize).toHaveBeenCalledWith(imageBlob, 256, 53);
+  });
+
+  it("should not resize the original image if maxSize is higher than the original size", async () => {
+    const imageBlob = new Blob(
+      [Uint8Array.from(OnePixel, (c) => c.charCodeAt(0))],
+      { type: "image/png" },
+    );
+
+    getImageSize.mockResolvedValue({ width: 1, height: 1 });
+
+    const image = await createImage(imageBlob, {
+      owner: account._owner,
+      placeholder: false,
+      progressive: false,
+      maxSize: 256,
+    });
+
+    expect(image).toBeDefined();
+
+    expect(image.originalSize).toEqual([1, 1]);
+    expect(image.placeholderDataURL).not.toBeDefined();
+    expect(image.progressive).toBe(false);
+    expect(image.original).toBeDefined();
+    expect(image[`1x1`]).toStrictEqual(image.original);
+
+    expect(resize).not.toHaveBeenCalled();
+  });
+
+  it("should create an image with intermediate sizes for progressive loading", async () => {
+    const imageBlob = new Blob(
+      [Uint8Array.from(White1920, (c) => c.charCodeAt(0))],
+      { type: "image/png" },
+    );
+
+    getImageSize.mockResolvedValue({ width: 1920, height: 400 });
+    resize.mockResolvedValue(new Blob([White1920], { type: "image/png" }));
+
+    const image = await createImage(imageBlob, {
+      owner: account._owner,
+      progressive: true,
+      placeholder: false,
+    });
+
+    expect(image).toBeDefined();
+    expect(image.originalSize).toEqual([1920, 400]);
+    expect(image.placeholderDataURL).not.toBeDefined();
+
+    expect(image[`256x53`]).toBeDefined();
+    expect(image[`1024x213`]).toBeDefined();
+    expect(image[`2048x427`]).not.toBeDefined();
+
+    expect(resize).toHaveBeenCalledWith(imageBlob, 256, 53);
+    expect(resize).toHaveBeenCalledWith(imageBlob, 1024, 213);
+    expect(resize).not.toHaveBeenCalledWith(imageBlob, 2048, 427);
+  });
+
+  it("should lose the original size and create image based on maxSize", async () => {
+    const imageBlob = new Blob(
+      [Uint8Array.from(White1920, (c) => c.charCodeAt(0))],
+      { type: "image/png" },
+    );
+
+    getImageSize.mockResolvedValue({ width: 1920, height: 400 });
+    resize.mockResolvedValue(new Blob([White1920], { type: "image/png" }));
+
+    const image = await createImage(imageBlob, {
+      owner: account._owner,
+      maxSize: 256,
+      placeholder: false,
+      progressive: true,
+    });
+
+    expect(image).toBeDefined();
+
+    expect(image.originalSize).toEqual([256, 53]);
+    expect(image.placeholderDataURL).not.toBeDefined();
+    expect(image[`256x53`]).toBeDefined();
+    expect(image[`1024x213`]).not.toBeDefined();
+    expect(image[`2048x427`]).not.toBeDefined();
+
+    expect(resize).toHaveBeenCalledWith(imageBlob, 256, 53);
+    expect(resize).not.toHaveBeenCalledWith(imageBlob, 1024, 213);
+    expect(resize).not.toHaveBeenCalledWith(imageBlob, 2048, 427);
+  });
+});
+
+// 1x1 png
+const OnePixel = atob(
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
+);
+
+// Image 1920x400
+const White1920 = atob(
+  "/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAP//////////////////////////////////////////////////////////////////////////////////////2wBDAf//////////////////////////////////////////////////////////////////////////////////////wAARCAGQB4ADASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAP/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//2Q==",
+);

package/src/media/create-image.ts

@@ -0,0 +1,180 @@
+import {
+  Account,
+  FileStream,
+  Group,
+  ImageDefinition,
+  type Loaded,
+} from "jazz-tools";
+
+export type SourceType = Blob | File | string;
+
+export type CreateImageOptions = {
+  /** The owner of the image. Can be either a Group or Account. If not specified, the current user will be the owner. */
+  owner?: Group | Account;
+  /**
+   * Controls placeholder generation for the image.
+   * - `"blur"`: Generates a blurred placeholder image (default)
+   * - `false`: No placeholder is generated
+   * @default "blur"
+   */
+  placeholder?: "blur" | false;
+  /**
+   * Maximum size constraint for the image. The image will be resized to fit within this size while maintaining aspect ratio.
+   * If the image is smaller than maxSize in both dimensions, no resizing occurs.
+   * @example 1024 // Resizes image to fit within 1024px in the largest dimension
+   */
+  maxSize?: number; // | [number, number];
+  /**
+   * The progressive loading pattern is a technique that allows images to load incrementally, starting with a small version and gradually replacing it with a larger version as it becomes available.
+   * This is useful for improving the user experience by showing a placeholder while the image is loading.
+   *
+   * Passing progressive: true to createImage() will create internal smaller versions of the image for future uses.
+   *
+   * @default false
+   */
+  progressive?: boolean;
+};
+
+export type CreateImageImpl = {
+  createFileStreamFromSource: (
+    imageBlobOrFile: SourceType,
+    owner?: Group | Account,
+  ) => Promise<FileStream>;
+  getImageSize: (
+    imageBlobOrFile: SourceType,
+  ) => Promise<{ width: number; height: number }>;
+  getPlaceholderBase64: (imageBlobOrFile: SourceType) => Promise<string>;
+  resize: (
+    imageBlobOrFile: SourceType,
+    width: number,
+    height: number,
+  ) => Promise<Blob | string>;
+};
+
+export function createImageFactory(impl: CreateImageImpl) {
+  return (source: SourceType, options: CreateImageOptions) =>
+    createImage(source, options, impl);
+}
+
+async function createImage(
+  imageBlobOrFile: SourceType,
+  options: CreateImageOptions,
+  impl: CreateImageImpl,
+): Promise<Loaded<typeof ImageDefinition, { $each: true }>> {
+  // Get the original size of the image
+  const { width: originalWidth, height: originalHeight } =
+    await impl.getImageSize(imageBlobOrFile);
+
+  const def: {
+    originalSize: [number, number];
+    progressive: boolean;
+    placeholderDataURL: string | undefined;
+    original?: FileStream;
+    files: Record<string, FileStream>;
+  } = {
+    originalSize: [originalWidth, originalHeight],
+    progressive: false,
+    placeholderDataURL: undefined,
+    files: {},
+  };
+
+  // Placeholder
+  if (options?.placeholder === "blur") {
+    def.placeholderDataURL = await impl.getPlaceholderBase64(imageBlobOrFile);
+  }
+
+  /**
+   * Original
+   *
+   * Save the original image.
+   * If the maxSize is set, resize the image to the maxSize if needed
+   */
+  if (options?.maxSize === undefined) {
+    def.original = await impl.createFileStreamFromSource(
+      imageBlobOrFile,
+      options?.owner,
+    );
+    def.files[`${originalWidth}x${originalHeight}`] = def.original;
+  } else if (
+    options?.maxSize >= originalWidth &&
+    options?.maxSize >= originalHeight
+  ) {
+    // no resizes required, just return the original image
+    def.original = await impl.createFileStreamFromSource(
+      imageBlobOrFile,
+      options?.owner,
+    );
+    def.files[`${originalWidth}x${originalHeight}`] = def.original;
+  } else {
+    const { width, height } = getNewDimensions(
+      originalWidth,
+      originalHeight,
+      options.maxSize,
+    );
+
+    const blob = await impl.resize(imageBlobOrFile, width, height);
+    def.originalSize = [width, height];
+    def.original = await impl.createFileStreamFromSource(blob, options?.owner);
+    def.files[`${width}x${height}`] = def.original;
+  }
+
+  const imageCoValue = ImageDefinition.create(
+    {
+      originalSize: def.originalSize,
+      progressive: def.progressive,
+      placeholderDataURL: def.placeholderDataURL,
+      original: def.original,
+      ...def.files,
+    },
+    options?.owner,
+  );
+
+  /**
+   * Progressive loading
+   *
+   * Save a set of resized images using three sizes: 256, 1024, 2048
+   *
+   * On the client side, the image will be loaded progressively, starting from the smallest size and increasing the size until the original size is reached.
+   */
+  if (options?.progressive) {
+    imageCoValue.progressive = true;
+
+    const resizes = ([256, 1024, 2048] as const).filter(
+      (s) =>
+        s <
+        Math.max(imageCoValue.originalSize[0], imageCoValue.originalSize[1]),
+    );
+
+    for (const size of resizes) {
+      const { width, height } = getNewDimensions(
+        originalWidth,
+        originalHeight,
+        size,
+      );
+
+      const blob = await impl.resize(imageBlobOrFile, width, height);
+      imageCoValue[`${width}x${height}`] =
+        await impl.createFileStreamFromSource(blob, options?.owner);
+    }
+  }
+
+  return imageCoValue;
+}
+
+const getNewDimensions = (
+  originalWidth: number,
+  originalHeight: number,
+  maxSize: number,
+) => {
+  if (originalWidth > originalHeight) {
+    return {
+      width: maxSize,
+      height: Math.round(maxSize * (originalHeight / originalWidth)),
+    };
+  }
+
+  return {
+    width: Math.round(maxSize * (originalWidth / originalHeight)),
+    height: maxSize,
+  };
+};

package/src/media/index.browser.ts

@@ -0,0 +1,150 @@
+import { Account, FileStream, Group, ImageDefinition } from "jazz-tools";
+import { CreateImageOptions, createImageFactory } from "./create-image.js";
+
+export { highestResAvailable, loadImage, loadImageBySize } from "./utils.js";
+
+export { createImageFactory };
+
+export async function createImage(
+  imageBlobOrFile: Blob | File | string,
+  options?: CreateImageOptions,
+) {
+  return createImageFactory({
+    createFileStreamFromSource,
+    getImageSize,
+    getPlaceholderBase64,
+    resize,
+  })(imageBlobOrFile, options || {});
+}
+
+//  Image Manipulations
+async function createFileStreamFromSource(
+  imageBlobOrFile: Blob | File | string,
+  owner?: Account | Group,
+): Promise<FileStream> {
+  if (typeof imageBlobOrFile === "string") {
+    throw new Error(
+      "createFileStreamFromSource(string) is not supported on this platform",
+    );
+  }
+
+  return FileStream.createFromBlob(imageBlobOrFile, owner);
+}
+
+// using createImageBitmap is ~10x slower than Image object
+// Image object: 640 milliseconds
+// createImageBitmap: 8128 milliseconds
+function getImageFromBlob(blob: Blob): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      resolve(img);
+      URL.revokeObjectURL(img.src);
+    };
+    img.onerror = () => {
+      reject(new Error("Failed to load image"));
+      URL.revokeObjectURL(img.src);
+    };
+    img.src = URL.createObjectURL(blob);
+  });
+}
+
+async function getImageSize(
+  imageBlobOrFile: Blob | File | string,
+): Promise<{ width: number; height: number }> {
+  if (typeof imageBlobOrFile === "string") {
+    throw new Error("getImageSize(string) is not supported on browser");
+  }
+
+  const image = await getImageFromBlob(imageBlobOrFile);
+
+  return { width: image.width, height: image.height };
+}
+
+async function getPlaceholderBase64(
+  imageBlobOrFile: Blob | File | string,
+): Promise<string> {
+  if (typeof imageBlobOrFile === "string") {
+    throw new Error("getPlaceholderBase64(string) is not supported on browser");
+  }
+
+  const image = await getImageFromBlob(imageBlobOrFile);
+
+  const { width, height } = resizeDimensionsKeepingAspectRatio(
+    image.width,
+    image.height,
+    8,
+  );
+
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+
+  const ctx = canvas.getContext("2d");
+
+  if (!ctx) {
+    throw new Error("Failed to get context");
+  }
+
+  ctx.drawImage(image, 0, 0, width, height);
+
+  return canvas.toDataURL("image/png");
+}
+
+const resizeDimensionsKeepingAspectRatio = (
+  width: number,
+  height: number,
+  maxSize: number,
+): { width: number; height: number } => {
+  if (width <= maxSize && height <= maxSize) {
+    return { width, height };
+  }
+
+  const aspectRatio = width / height;
+
+  if (width >= height) {
+    return { width: maxSize, height: Math.round(maxSize / aspectRatio) };
+  } else {
+    return { width: Math.round(maxSize * aspectRatio), height: maxSize };
+  }
+};
+
+async function resize(
+  imageBlobOrFile: Blob | File | string,
+  width: number,
+  height: number,
+): Promise<Blob> {
+  if (typeof imageBlobOrFile === "string") {
+    throw new Error("resize(string) is not supported on browser");
+  }
+
+  const mimeType = imageBlobOrFile.type;
+
+  const image = await getImageFromBlob(imageBlobOrFile);
+
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+
+  const ctx = canvas.getContext("2d");
+
+  if (!ctx) {
+    throw new Error("Failed to get context");
+  }
+
+  ctx.drawImage(image, 0, 0, width, height);
+
+  return new Promise<Blob>((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (!blob) {
+          reject(new Error("Failed to convert canvas to blob"));
+          return;
+        }
+        resolve(blob);
+      },
+      mimeType,
+      0.8,
+    );
+  });
+}

package/src/media/index.native.ts

@@ -0,0 +1,153 @@
+import ImageResizer from "@bam.tech/react-native-image-resizer";
+import type { Account, Group, ImageDefinition } from "jazz-tools";
+import { FileStream } from "jazz-tools";
+import { Image } from "react-native";
+import {
+  CreateImageOptions,
+  SourceType,
+  createImageFactory,
+} from "./create-image.js";
+
+export { highestResAvailable, loadImage, loadImageBySize } from "./utils.js";
+export { createImageFactory };
+
+export async function createImage(
+  imageBlobOrFile: Blob | File | string,
+  options?: CreateImageOptions,
+) {
+  return createImageFactory({
+    getImageSize,
+    getPlaceholderBase64,
+    createFileStreamFromSource,
+    resize,
+  })(imageBlobOrFile, options || {});
+}
+
+async function getImageSize(
+  filePath: SourceType,
+): Promise<{ width: number; height: number }> {
+  if (typeof filePath !== "string") {
+    throw new Error(
+      "createImage(Blob | File) is not supported on this platform",
+    );
+  }
+
+  const { width, height } = await Image.getSize(filePath);
+
+  return { width, height };
+}
+
+async function getPlaceholderBase64(filePath: SourceType): Promise<string> {
+  if (typeof filePath !== "string") {
+    throw new Error(
+      "createImage(Blob | File) is not supported on this platform",
+    );
+  }
+
+  if (typeof ImageResizer === "undefined" || ImageResizer === null) {
+    throw new Error(
+      "ImageResizer is not installed, please run `npm install @bam.tech/react-native-image-resizer`",
+    );
+  }
+
+  const { uri } = await ImageResizer.createResizedImage(
+    filePath,
+    8,
+    8,
+    "PNG",
+    100,
+  );
+
+  return imageUrlToBase64(uri);
+}
+
+async function resize(
+  filePath: SourceType,
+  width: number,
+  height: number,
+): Promise<string> {
+  if (typeof filePath !== "string") {
+    throw new Error(
+      "createImage(Blob | File) is not supported on this platform",
+    );
+  }
+
+  if (typeof ImageResizer === "undefined" || ImageResizer === null) {
+    throw new Error(
+      "ImageResizer is not installed, please run `npm install @bam.tech/react-native-image-resizer`",
+    );
+  }
+
+  const mimeType = await getMimeType(filePath);
+
+  const { uri } = await ImageResizer.createResizedImage(
+    filePath,
+    width,
+    height,
+    contentTypeToFormat(mimeType),
+    80,
+  );
+
+  return uri;
+}
+
+function getMimeType(filePath: string): Promise<string> {
+  return fetch(filePath)
+    .then((res) => res.blob())
+    .then((blob) => blob.type);
+}
+
+function contentTypeToFormat(contentType: string) {
+  if (contentType.includes("image/png")) return "PNG";
+  if (contentType.includes("image/jpeg")) return "JPEG";
+  if (contentType.includes("image/webp")) return "WEBP";
+  return "PNG";
+}
+
+export async function createFileStreamFromSource(
+  filePath: SourceType,
+  owner?: Account | Group,
+): Promise<FileStream> {
+  if (typeof filePath !== "string") {
+    throw new Error(
+      "createImage(Blob | File) is not supported on this platform",
+    );
+  }
+
+  const blob = await fetch(filePath).then((res) => res.blob());
+  const arrayBuffer = await toArrayBuffer(blob);
+
+  return FileStream.createFromArrayBuffer(arrayBuffer, blob.type, undefined, {
+    owner,
+  });
+}
+
+// TODO: look for more efficient way to do this as React Native hasn't blob.arrayBuffer()
+function toArrayBuffer(blob: Blob): Promise<ArrayBuffer> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      resolve(reader.result as ArrayBuffer);
+    };
+    reader.onerror = (error) => {
+      reject(error);
+    };
+    reader.readAsArrayBuffer(blob);
+  });
+}
+
+async function imageUrlToBase64(url: string): Promise<string> {
+  const response = await fetch(url);
+  const blob = await response.blob();
+  return new Promise((onSuccess, onError) => {
+    try {
+      const reader = new FileReader();
+      reader.onload = function () {
+        onSuccess(reader.result as string);
+      };
+      reader.readAsDataURL(blob);
+    } catch (e) {
+      onError(e);
+    }
+  });
+}