ImageDefinition

ImageDefinition is a specialized CoValue designed specifically for managing images in Jazz applications. It extends beyond basic file storage by supporting a blurry placeholder, built-in resizing, and progressive loading patterns.

Note: This guide applies to both Expo and framework-less React Native implementations.

Beyond ImageDefinition, Jazz offers higher-level functions and components that make it easier to use images:

  • createImage() - function to create an ImageDefinition from a file
  • Image - React Native component to display a stored image

For examples of use, see our example apps:

Installation

The Jazz's images implementation is based on @bam.tech/react-native-image-resizer. Check the installation guide for more details.

Creating Images

The easiest way to create and use images in your Jazz application is with the createImage() function:

import { Account, Group, ImageDefinition } from "jazz-tools";

declare const me: {
  _owner: Account | Group;
  profile: {
    image: ImageDefinition;
  };
};

// ---cut---

import { createImage } from "jazz-tools/media";
import { launchImageLibrary } from 'react-native-image-picker';

async function handleImagePicker() {
  // Use your favorite image picker library to get the image URI
  const result = await launchImageLibrary({
    mediaType: 'photo',
    quality: 1,
  });

  if (!result.didCancel && result.assets && result.assets.length > 0) {
    // Creates ImageDefinition with a blurry placeholder, limited to 1024px on the longest side, and multiple resolutions automatically.
    // See the options below for more details.
    const image = await createImage(result.assets[0].uri, {
      owner: me._owner,
      maxSize: 1024,
      placeholder: "blur",
      progressive: true,
    });

    // Store the image
    me.profile.image = image;
  }
}

Note: createImage() currently supports browser and react-native environments.

The createImage() function:

  • Creates an ImageDefinition with the right properties
  • Generates a small placeholder for immediate display
  • Creates multiple resolution variants of your image
  • Returns the created ImageDefinition

Configuration Options

declare function 
function createImage(image: Blob | File | string, options: {
    owner?: Group | Account;
    placeholder?: "blur" | false;
    maxSize?: number;
    progressive?: boolean;
}): Promise<ImageDefinition>
createImage
(
image: string | Blob | Fileimage: Blob | File | string,
options: {
    owner?: Group | Account;
    placeholder?: "blur" | false;
    maxSize?: number;
    progressive?: boolean;
}
options
: {
owner?: Group | Account | undefinedowner?: class Group
@categoryIdentity & Permissions
Group
| class Account
@categoryIdentity & Permissions
Account
;
placeholder?: false | "blur" | undefinedplaceholder?: "blur" | false; maxSize?: number | undefinedmaxSize?: number; progressive?: boolean | undefinedprogressive?: boolean; }): interface Promise<T>
Represents the completion of an asynchronous operation
Promise
<
type ImageDefinition = {
    original: FileStream | null;
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
    progressive: boolean;
} & {
    [key: string]: FileStream | null;
} & CoMap
@categoryMedia
ImageDefinition
>

image

The image to create an ImageDefinition from. On browser environments, this can be a Blob or a File. On React Native, this must be a string with the file path.

owner

The owner of the ImageDefinition. This is used to control access to the image. See Groups as permission scopes for more information on how to use groups to control access to images.

placeholder

Sometimes the wanted image is not loaded yet. The placeholder is a base64 encoded image that is displayed while the image is loading. Currently, only "blur" is a supported.

maxSize

The image generation process includes a maximum size setting that controls the longest side of the image. A built-in resizing feature is applied based on this setting.

progressive

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.

Create multiple resized copies

To create multiple resized copies of an original image for better layout control, you can utilize the createImage function multiple times with different parameters for each desired size. Here’s an example of how you might implement this:

import { import coco } from "jazz-tools";
import { function createImage(imageBlobOrFile: SourceType, options?: CreateImageOptions): Promise<ImageDefinition>
Creates an ImageDefinition from an image file or blob with built-in UX features. This function creates a specialized CoValue for managing images in Jazz applications. It supports blurry placeholders, built-in resizing, and progressive loading patterns.
@returnsPromise that resolves to an ImageDefinition@example```ts import { createImage } from "jazz-tools/media"; // Create an image from a file input async function handleFileUpload(event: React.ChangeEvent<HTMLInputElement>) { const file = event.target.files?.[0]; if (file) { // Creates ImageDefinition with a blurry placeholder, limited to 1024px // on the longest side, and multiple resolutions automatically const image = await createImage(file, { owner: me._owner, maxSize: 1024, placeholder: "blur", progressive: true, }); // Store the image in your application data me.profile.image = image; } } ```@example```ts // React Native example import { createImage } from "jazz-tools/media"; async function uploadImageFromCamera(imagePath: string) { const image = await createImage(imagePath, { maxSize: 800, placeholder: "blur", progressive: false, }); return image; } ```
createImage
} from "jazz-tools/media";
// Jazz Schema const
const ProductImage: co.Map<{
    image: co.Map<{
        original: import("/vercel/path0/packages/jazz-tools/dist/tools/internal").FileStreamSchema;
        originalSize: ZodTuple<[ZodNumber, ZodNumber], null>;
        placeholderDataURL: ZodOptional<ZodString>;
        progressive: ZodBoolean;
    }, co.FileStream, Account | Group>;
    thumbnail: co.Map<...>;
}, unknown, Account | Group>
ProductImage
= import coco.
map<{
    image: co.Map<{
        original: import("/vercel/path0/packages/jazz-tools/dist/tools/internal").FileStreamSchema;
        originalSize: ZodTuple<[ZodNumber, ZodNumber], null>;
        placeholderDataURL: ZodOptional<ZodString>;
        progressive: ZodBoolean;
    }, co.FileStream, Account | Group>;
    thumbnail: co.Map<...>;
}>(shape: {
    ...;
}): co.Map<...>
export map
map
({
image: co.Map<{
    original: import("/vercel/path0/packages/jazz-tools/dist/tools/internal").FileStreamSchema;
    originalSize: ZodTuple<[ZodNumber, ZodNumber], null>;
    placeholderDataURL: ZodOptional<ZodString>;
    progressive: ZodBoolean;
}, co.FileStream, Account | Group>
image
: import coco.
function image(): co.Image
export image
image
(),
thumbnail: co.Map<{
    original: import("/vercel/path0/packages/jazz-tools/dist/tools/internal").FileStreamSchema;
    originalSize: ZodTuple<[ZodNumber, ZodNumber], null>;
    placeholderDataURL: ZodOptional<ZodString>;
    progressive: ZodBoolean;
}, co.FileStream, Account | Group>
thumbnail
: import coco.
function image(): co.Image
export image
image
(),
}); const
const mainImage: {
    original: FileStream | null;
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
    progressive: boolean;
} & {
    [key: string]: FileStream | null;
} & CoMap
mainImage
= await function createImage(imageBlobOrFile: SourceType, options?: CreateImageOptions): Promise<ImageDefinition>
Creates an ImageDefinition from an image file or blob with built-in UX features. This function creates a specialized CoValue for managing images in Jazz applications. It supports blurry placeholders, built-in resizing, and progressive loading patterns.
@returnsPromise that resolves to an ImageDefinition@example```ts import { createImage } from "jazz-tools/media"; // Create an image from a file input async function handleFileUpload(event: React.ChangeEvent<HTMLInputElement>) { const file = event.target.files?.[0]; if (file) { // Creates ImageDefinition with a blurry placeholder, limited to 1024px // on the longest side, and multiple resolutions automatically const image = await createImage(file, { owner: me._owner, maxSize: 1024, placeholder: "blur", progressive: true, }); // Store the image in your application data me.profile.image = image; } } ```@example```ts // React Native example import { createImage } from "jazz-tools/media"; async function uploadImageFromCamera(imagePath: string) { const image = await createImage(imagePath, { maxSize: 800, placeholder: "blur", progressive: false, }); return image; } ```
createImage
(const myFile: stringmyFile);
const
const thumbnail: {
    original: FileStream | null;
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
    progressive: boolean;
} & {
    [key: string]: FileStream | null;
} & CoMap
thumbnail
= await function createImage(imageBlobOrFile: SourceType, options?: CreateImageOptions): Promise<ImageDefinition>
Creates an ImageDefinition from an image file or blob with built-in UX features. This function creates a specialized CoValue for managing images in Jazz applications. It supports blurry placeholders, built-in resizing, and progressive loading patterns.
@returnsPromise that resolves to an ImageDefinition@example```ts import { createImage } from "jazz-tools/media"; // Create an image from a file input async function handleFileUpload(event: React.ChangeEvent<HTMLInputElement>) { const file = event.target.files?.[0]; if (file) { // Creates ImageDefinition with a blurry placeholder, limited to 1024px // on the longest side, and multiple resolutions automatically const image = await createImage(file, { owner: me._owner, maxSize: 1024, placeholder: "blur", progressive: true, }); // Store the image in your application data me.profile.image = image; } } ```@example```ts // React Native example import { createImage } from "jazz-tools/media"; async function uploadImageFromCamera(imagePath: string) { const image = await createImage(imagePath, { maxSize: 800, placeholder: "blur", progressive: false, }); return image; } ```
createImage
(const myFile: stringmyFile, {
maxSize?: number | undefined
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.
@example1024 // Resizes image to fit within 1024px in the largest dimension
maxSize
: 100,
}); // or, in case of migration, you can use the original stored image. const
const newThumb: {
    original: FileStream | null;
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
    progressive: boolean;
} & {
    [key: string]: FileStream | null;
} & CoMap
newThumb
= await function createImage(imageBlobOrFile: SourceType, options?: CreateImageOptions): Promise<ImageDefinition>
Creates an ImageDefinition from an image file or blob with built-in UX features. This function creates a specialized CoValue for managing images in Jazz applications. It supports blurry placeholders, built-in resizing, and progressive loading patterns.
@returnsPromise that resolves to an ImageDefinition@example```ts import { createImage } from "jazz-tools/media"; // Create an image from a file input async function handleFileUpload(event: React.ChangeEvent<HTMLInputElement>) { const file = event.target.files?.[0]; if (file) { // Creates ImageDefinition with a blurry placeholder, limited to 1024px // on the longest side, and multiple resolutions automatically const image = await createImage(file, { owner: me._owner, maxSize: 1024, placeholder: "blur", progressive: true, }); // Store the image in your application data me.profile.image = image; } } ```@example```ts // React Native example import { createImage } from "jazz-tools/media"; async function uploadImageFromCamera(imagePath: string) { const image = await createImage(imagePath, { maxSize: 800, placeholder: "blur", progressive: false, }); return image; } ```
createImage
(
const mainImage: {
    original: FileStream | null;
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
    progressive: boolean;
} & {
    [key: string]: FileStream | null;
} & CoMap
mainImage
!.original: FileStream | nulloriginal!.
FileStream.toBlob(options?: {
    allowUnfinished?: boolean;
}): Blob | undefined
toBlob
()!, {
maxSize?: number | undefined
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.
@example1024 // Resizes image to fit within 1024px in the largest dimension
maxSize
: 100,
}); const
const imageSet: {
    image: {
        original: FileStream;
        originalSize: [number, number];
        placeholderDataURL: string | undefined;
        progressive: boolean;
    } & {
        [key: string]: FileStream;
    } & CoMap;
    thumbnail: {
        original: FileStream;
        originalSize: [number, number];
        placeholderDataURL: string | undefined;
        progressive: boolean;
    } & ... 1 more ... & CoMap;
} & CoMap
imageSet
=
const ProductImage: co.Map<{
    image: co.Map<{
        original: import("/vercel/path0/packages/jazz-tools/dist/tools/internal").FileStreamSchema;
        originalSize: ZodTuple<[ZodNumber, ZodNumber], null>;
        placeholderDataURL: ZodOptional<ZodString>;
        progressive: ZodBoolean;
    }, co.FileStream, Account | Group>;
    thumbnail: co.Map<...>;
}, unknown, Account | Group>
ProductImage
.
CoMapSchema<{ image: CoMapSchema<{ original: import("/vercel/path0/packages/jazz-tools/dist/tools/internal").FileStreamSchema; originalSize: ZodTuple<[ZodNumber, ZodNumber], null>; placeholderDataURL: ZodOptional<ZodString>; progressive: ZodBoolean; }, FileStreamSchema, Account | Group>; thumbnail: CoMapSchema<...>; }, unknown, Account | Group>.create: (init: {
    image: ({
        original: FileStream | null;
        originalSize: [number, number];
        placeholderDataURL: string | undefined;
        progressive: boolean;
    } & {
        [key: string]: FileStream | null;
    } & CoMap) | {
        ...;
    };
    thumbnail: ({
        original: FileStream | null;
        originalSize: [number, number];
        placeholderDataURL: string | undefined;
        progressive: boolean;
    } & ... 1 more ... & CoMap) | {
        ...;
    };
}, options?: Account | ... 2 more ... | undefined) => {
    ...;
} & CoMap
create
({
image: ({
    original: FileStream | null;
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
    progressive: boolean;
} & {
    [key: string]: FileStream | null;
} & CoMap) | {
    ...;
}
image
:
const mainImage: {
    original: FileStream | null;
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
    progressive: boolean;
} & {
    [key: string]: FileStream | null;
} & CoMap
mainImage
,
thumbnail: ({
    original: FileStream | null;
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
    progressive: boolean;
} & {
    [key: string]: FileStream | null;
} & CoMap) | {
    ...;
}
thumbnail
,
});

Displaying Images

The Image component is the best way to let Jazz handle the image loading.

import { Image } from "jazz-tools/react-native";
import { StyleSheet } from "react-native";

function GalleryView({ image }) {
  return (
    <Image
      imageId={image.id}
      style={styles.galleryImage}
      width={400}
      resizeMode="cover"
    />
  );
}

const styles = StyleSheet.create({
  galleryImage: {
    width: '100%',
    height: 200,
    borderRadius: 8,
  }
});

The Image component handles:

  • Showing a placeholder while loading, if generated
  • Automatically selecting the appropriate resolution, if generated with progressive loading
  • Progressive enhancement as higher resolutions become available, if generated with progressive loading
  • Determining the correct width/height attributes to avoid layout shifting
  • Cleaning up resources when unmounted

The component's props are:

export type ImageProps = Omit<
  RNImageProps,
  "width" | "height" | "source"
> & {
  imageId: string;
  width?: number | "original";
  height?: number | "original";
};

Width and Height props

The width and height props are used to control the best resolution to use but also the width and height attributes of the image tag.

Let's say we have an image with a width of 1920px and a height of 1080px.

<Image imageId="123" />
// <RNImage src={...} /> with the highest resolution available

<Image imageId="123" width="original" height="original" />
// <RNImage width="1920" height="1080" />

<Image imageId="123" width="600" />
// <RNImage width="600" /> BAD! See https://reactnative.dev/docs/images#network-images

<Image imageId="123" width="600" height="original" />
// <RNImage width="600" height="338" /> keeping the aspect ratio

<Image imageId="123" width="original" height="600" />
// <RNImage width="1067" height="600" /> keeping the aspect ratio

<Image imageId="123" width="600" height="600" />
// <RNImage width="600" height="600" />

If the image was generated with progressive loading, the width and height props will determine the best resolution to use.

Imperative usage

Like other CoValues, ImageDefinition can be used to load the object.

import { 
type ImageDefinition = {
    original: FileStream | null;
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
    progressive: boolean;
} & {
    [key: string]: FileStream | null;
} & CoMap
const ImageDefinition: CoMapSchema<{
    original: import("/vercel/path0/packages/jazz-tools/dist/tools/internal").FileStreamSchema;
    originalSize: ZodTuple<[ZodNumber, ZodNumber], null>;
    placeholderDataURL: ZodOptional<ZodString>;
    progressive: ZodBoolean;
}, FileStreamSchema, Account | Group>
@categoryMedia
ImageDefinition
} from "jazz-tools";
const
const image: CoMapLikeLoaded<{
    original: FileStream | null;
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
    progressive: boolean;
} & CoMap, {
    original: true;
}, 10, []> | null
image
= await
const ImageDefinition: CoMapSchema<{
    original: import("/vercel/path0/packages/jazz-tools/dist/tools/internal").FileStreamSchema;
    originalSize: ZodTuple<[ZodNumber, ZodNumber], null>;
    placeholderDataURL: ZodOptional<ZodString>;
    progressive: ZodBoolean;
}, FileStreamSchema, Account | Group>
@categoryMedia
ImageDefinition
.
CoMapSchema<{ original: import("/vercel/path0/packages/jazz-tools/dist/tools/internal").FileStreamSchema; originalSize: ZodTuple<[ZodNumber, ZodNumber], null>; placeholderDataURL: ZodOptional<ZodString>; progressive: ZodBoolean; }, FileStreamSchema, Account | Group>.load<{
    original: true;
}>(id: string, options?: {
    resolve?: RefsToResolve<{
        original: FileStream | null;
        originalSize: [number, number];
        placeholderDataURL: string | undefined;
        progressive: boolean;
    } & CoMap, 10, []> | undefined;
    loadAs?: Account | AnonymousJazzAgent;
    skipRetry?: boolean;
} | undefined): Promise<...>
load
("123", {
resolve?: RefsToResolve<{
    original: FileStream | null;
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
    progressive: boolean;
} & CoMap, 10, []> | undefined
resolve
: {
original?: RefsToResolve<FileStream, 10, [0]> | undefinedoriginal: true, }, }); if(
const image: CoMapLikeLoaded<{
    original: FileStream | null;
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
    progressive: boolean;
} & CoMap, {
    original: true;
}, 10, []> | null
image
) {
var console: Console
The `console` module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers. The module exports two specific components: * A `Console` class with methods such as `console.log()`, `console.error()` and `console.warn()` that can be used to write to any Node.js stream. * A global `console` instance configured to write to [`process.stdout`](https://nodejs.org/docs/latest-v20.x/api/process.html#processstdout) and [`process.stderr`](https://nodejs.org/docs/latest-v20.x/api/process.html#processstderr). The global `console` can be used without importing the `node:console` module. _**Warning**_: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the [`note on process I/O`](https://nodejs.org/docs/latest-v20.x/api/process.html#a-note-on-process-io) for more information. Example using the global `console`: ```js console.log('hello world'); // Prints: hello world, to stdout console.log('hello %s', 'world'); // Prints: hello world, to stdout console.error(new Error('Whoops, something bad happened')); // Prints error message and stack trace to stderr: // Error: Whoops, something bad happened // at [eval]:5:15 // at Script.runInThisContext (node:vm:132:18) // at Object.runInThisContext (node:vm:309:38) // at node:internal/process/execution:77:19 // at [eval]-wrapper:6:22 // at evalScript (node:internal/process/execution:76:60) // at node:internal/main/eval_string:23:3 const name = 'Will Robinson'; console.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to stderr ``` Example using the `Console` class: ```js const out = getStreamSomehow(); const err = getStreamSomehow(); const myConsole = new console.Console(out, err); myConsole.log('hello world'); // Prints: hello world, to out myConsole.log('hello %s', 'world'); // Prints: hello world, to out myConsole.error(new Error('Whoops, something bad happened')); // Prints: [Error: Whoops, something bad happened], to err const name = 'Will Robinson'; myConsole.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to err ```
@see[source](https://github.com/nodejs/node/blob/v20.11.1/lib/console.js)
console
.Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)
[MDN Reference](https://developer.mozilla.org/docs/Web/API/console/log_static)
log
({
originalSize: [number, number]originalSize:
const image: CoMapLikeLoaded<{
    original: FileStream | null;
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
    progressive: boolean;
} & CoMap, {
    original: true;
}, 10, []>
image
.originalSize: [number, number]originalSize,
placeholderDataUrl: string | undefinedplaceholderDataUrl:
const image: CoMapLikeLoaded<{
    original: FileStream | null;
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
    progressive: boolean;
} & CoMap, {
    original: true;
}, 10, []>
image
.placeholderDataURL: string | undefinedplaceholderDataURL,
original: FileStreamoriginal:
const image: CoMapLikeLoaded<{
    original: FileStream | null;
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
    progressive: boolean;
} & CoMap, {
    original: true;
}, 10, []>
image
.original: FileStreamoriginal, // this FileStream may be not loaded yet
}); }

image.original is a FileStream and its content can be read as described in the FileStream documentation.

Since FileStream objects are also CoValues, they must be loaded before use. To simplify loading, if you want to load the binary data saved as Original, you can use the loadImage function.

import { 
function loadImage(imageOrId: ImageDefinition | string): Promise<{
    width: number;
    height: number;
    image: FileStream;
} | null>
loadImage
} from "jazz-tools/media";
const
const image: {
    width: number;
    height: number;
    image: FileStream;
} | null
image
= await
function loadImage(imageOrId: ImageDefinition | string): Promise<{
    width: number;
    height: number;
    image: FileStream;
} | null>
loadImage
(const imageDefinitionOrId: stringimageDefinitionOrId);
if(
const image: {
    width: number;
    height: number;
    image: FileStream;
} | null
image
) {
var console: Console
The `console` module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers. The module exports two specific components: * A `Console` class with methods such as `console.log()`, `console.error()` and `console.warn()` that can be used to write to any Node.js stream. * A global `console` instance configured to write to [`process.stdout`](https://nodejs.org/docs/latest-v20.x/api/process.html#processstdout) and [`process.stderr`](https://nodejs.org/docs/latest-v20.x/api/process.html#processstderr). The global `console` can be used without importing the `node:console` module. _**Warning**_: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the [`note on process I/O`](https://nodejs.org/docs/latest-v20.x/api/process.html#a-note-on-process-io) for more information. Example using the global `console`: ```js console.log('hello world'); // Prints: hello world, to stdout console.log('hello %s', 'world'); // Prints: hello world, to stdout console.error(new Error('Whoops, something bad happened')); // Prints error message and stack trace to stderr: // Error: Whoops, something bad happened // at [eval]:5:15 // at Script.runInThisContext (node:vm:132:18) // at Object.runInThisContext (node:vm:309:38) // at node:internal/process/execution:77:19 // at [eval]-wrapper:6:22 // at evalScript (node:internal/process/execution:76:60) // at node:internal/main/eval_string:23:3 const name = 'Will Robinson'; console.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to stderr ``` Example using the `Console` class: ```js const out = getStreamSomehow(); const err = getStreamSomehow(); const myConsole = new console.Console(out, err); myConsole.log('hello world'); // Prints: hello world, to out myConsole.log('hello %s', 'world'); // Prints: hello world, to out myConsole.error(new Error('Whoops, something bad happened')); // Prints: [Error: Whoops, something bad happened], to err const name = 'Will Robinson'; myConsole.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to err ```
@see[source](https://github.com/nodejs/node/blob/v20.11.1/lib/console.js)
console
.Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)
[MDN Reference](https://developer.mozilla.org/docs/Web/API/console/log_static)
log
({
width: numberwidth:
const image: {
    width: number;
    height: number;
    image: FileStream;
}
image
.width: numberwidth,
height: numberheight:
const image: {
    width: number;
    height: number;
    image: FileStream;
}
image
.height: numberheight,
image: FileStreamimage:
const image: {
    width: number;
    height: number;
    image: FileStream;
}
image
.image: FileStreamimage,
}); }

If the image was generated with progressive loading, and you want to access the best-fit resolution, use loadImageBySize. It will load the image of the best resolution that fits the wanted width and height.

import { 
function loadImageBySize(imageOrId: ImageDefinition | string, wantedWidth: number, wantedHeight: number): Promise<{
    width: number;
    height: number;
    image: FileStream;
} | null>
loadImageBySize
} from "jazz-tools/media";
const
const image: {
    width: number;
    height: number;
    image: FileStream;
} | null
image
= await
function loadImageBySize(imageOrId: ImageDefinition | string, wantedWidth: number, wantedHeight: number): Promise<{
    width: number;
    height: number;
    image: FileStream;
} | null>
loadImageBySize
(const imageDefinitionOrId: stringimageDefinitionOrId, 600, 600); // 600x600
if(
const image: {
    width: number;
    height: number;
    image: FileStream;
} | null
image
) {
var console: Console
The `console` module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers. The module exports two specific components: * A `Console` class with methods such as `console.log()`, `console.error()` and `console.warn()` that can be used to write to any Node.js stream. * A global `console` instance configured to write to [`process.stdout`](https://nodejs.org/docs/latest-v20.x/api/process.html#processstdout) and [`process.stderr`](https://nodejs.org/docs/latest-v20.x/api/process.html#processstderr). The global `console` can be used without importing the `node:console` module. _**Warning**_: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the [`note on process I/O`](https://nodejs.org/docs/latest-v20.x/api/process.html#a-note-on-process-io) for more information. Example using the global `console`: ```js console.log('hello world'); // Prints: hello world, to stdout console.log('hello %s', 'world'); // Prints: hello world, to stdout console.error(new Error('Whoops, something bad happened')); // Prints error message and stack trace to stderr: // Error: Whoops, something bad happened // at [eval]:5:15 // at Script.runInThisContext (node:vm:132:18) // at Object.runInThisContext (node:vm:309:38) // at node:internal/process/execution:77:19 // at [eval]-wrapper:6:22 // at evalScript (node:internal/process/execution:76:60) // at node:internal/main/eval_string:23:3 const name = 'Will Robinson'; console.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to stderr ``` Example using the `Console` class: ```js const out = getStreamSomehow(); const err = getStreamSomehow(); const myConsole = new console.Console(out, err); myConsole.log('hello world'); // Prints: hello world, to out myConsole.log('hello %s', 'world'); // Prints: hello world, to out myConsole.error(new Error('Whoops, something bad happened')); // Prints: [Error: Whoops, something bad happened], to err const name = 'Will Robinson'; myConsole.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to err ```
@see[source](https://github.com/nodejs/node/blob/v20.11.1/lib/console.js)
console
.Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)
[MDN Reference](https://developer.mozilla.org/docs/Web/API/console/log_static)
log
({
width: numberwidth:
const image: {
    width: number;
    height: number;
    image: FileStream;
}
image
.width: numberwidth,
height: numberheight:
const image: {
    width: number;
    height: number;
    image: FileStream;
}
image
.height: numberheight,
image: FileStreamimage:
const image: {
    width: number;
    height: number;
    image: FileStream;
}
image
.image: FileStreamimage,
}); }

If want to dynamically listen to the loaded resolution that best fits the wanted width and height, you can use the subscribe and the highestResAvailable function.

import { ImageDefinition } from "jazz-tools";
// ---cut---
// function highestResAvailable(image: ImageDefinition, wantedWidth: number, wantedHeight: number): FileStream | null
import { highestResAvailable } from "jazz-tools/media";

const image = await ImageDefinition.load("123");

image?.subscribe({}, (image) => {
  const bestImage = highestResAvailable(image, 600, 600);

  if(bestImage) {
    // bestImage is again a FileStream
    const blob = bestImage.image.toBlob();
    if(blob) {
      const url = URL.createObjectURL(blob);
      // ...
    }
  }
});

Image manipulation custom implementation

As mentioned, to manipulate the images (like placeholders, resizing, etc.), createImage() uses different implementations depending on the environment. Currently, the image manipulation is supported on browser and react-native environments.

On react-native, the image manipulation is done using the @bam.tech/react-native-image-resizer library. If you want to use a custom implementation, you can use the createImageFactory function in order create your own createImage function and use your preferred image manipulation library.

import { createImageFactory } from "jazz-tools/media";

const createImage = createImageFactory({
    createFileStreamFromSource: async (source, owner) => {
        // ...
    },
    getImageSize: async (image) => {
        // ...
    },
    getPlaceholderBase64: async (image) => {
        // ...
    },
    resize: async (image, width, height) => {
        // ...
    },
});