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.
Beyond ImageDefinition, Jazz offers higher-level functions and components that make it easier to use images:
createImage()
- function to create anImageDefinition
from a fileImage
- React component to display a stored image
The Image Upload example demonstrates use of images in Jazz.
Creating Images
The easiest way to create and use images in your Jazz application is with the createImage()
function:
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.createImage } from "jazz-tools/media"; // Create an image from a file input async functionfunction handleFileUpload(event: React.ChangeEvent<HTMLInputElement>): Promise<void>
handleFileUpload(event: React.ChangeEvent<HTMLInputElement>
event:export namespace React
React.interface React.ChangeEvent<T = Element>
ChangeEvent<HTMLInputElement>) { constconst file: File | undefined
file =event: React.ChangeEvent<HTMLInputElement>
event.React.ChangeEvent<HTMLInputElement>.target: EventTarget & HTMLInputElement
target.HTMLInputElement.files: FileList | null
Returns a FileList object on a file type input object. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/files)files?.[0]; if (const file: File | undefined
file) { // Creates ImageDefinition with a blurry placeholder, limited to 1024px on the longest side, and multiple resolutions automatically constimage = await
const image: { original: FileStream | null; originalSize: [number, number]; placeholderDataURL: string | undefined; progressive: boolean; } & { [key: string]: FileStream | null; } & CoMap
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.createImage(const file: File
file, {owner?: Account | Group | undefined
The owner of the image. Can be either a Group or Account. If not specified, the current user will be the owner.owner:me.
const me: { _owner: Account | Group; profile: { image: ImageDefinition; }; }
_owner: Account | Group
_owner,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.maxSize: 1024,placeholder?: false | "blur" | undefined
Controls placeholder generation for the image. - `"blur"`: Generates a blurred placeholder image (default) - `false`: No placeholder is generatedplaceholder: "blur",progressive?: boolean | undefined
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.progressive: true, }); // Store the image in your application datame.
const me: { _owner: Account | Group; profile: { image: ImageDefinition; }; }
profile.
profile: { image: ImageDefinition; }
image =
image: { original: FileStream | null; originalSize: [number, number]; placeholderDataURL: string | undefined; progressive: boolean; } & { [key: string]: FileStream | null; } & CoMap
image; } }
const image: { original: FileStream | null; originalSize: [number, number]; placeholderDataURL: string | undefined; progressive: boolean; } & { [key: string]: FileStream | null; } & CoMap
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
import type { ImageDefinition, Group, Account } from "jazz-tools"; // ---cut--- declare function createImage( image: Blob | File | string, options: { owner?: Group | Account; placeholder?: "blur" | false; maxSize?: number; progressive?: boolean; }): Promise<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 co
co } 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.createImage } from "jazz-tools/media"; // Jazz Schema constProductImage =
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>
import co
co.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>; thumbnail: co.Map<...>; }>(shape: { 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<...>; }): co.Map<...> export map
image:
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>
import co
co.image(),
function image(): co.Image export image
thumbnail:
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>
import co
co.image(), }); const
function image(): co.Image export image
mainImage = await
const mainImage: { original: FileStream | null; originalSize: [number, number]; placeholderDataURL: string | undefined; progressive: boolean; } & { [key: string]: FileStream | null; } & CoMap
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.createImage(const myBlob: Blob
myBlob); constthumbnail = await
const thumbnail: { original: FileStream | null; originalSize: [number, number]; placeholderDataURL: string | undefined; progressive: boolean; } & { [key: string]: FileStream | null; } & CoMap
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.createImage(const myBlob: Blob
myBlob, {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.maxSize: 100, }); // or, in case of migration, you can use the original stored image. constnewThumb = await
const newThumb: { original: FileStream | null; originalSize: [number, number]; placeholderDataURL: string | undefined; progressive: boolean; } & { [key: string]: FileStream | null; } & CoMap
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.createImage(mainImage!.
const mainImage: { original: FileStream | null; originalSize: [number, number]; placeholderDataURL: string | undefined; progressive: boolean; } & { [key: string]: FileStream | null; } & CoMap
original: FileStream | null
original!.toBlob()!, {
FileStream.toBlob(options?: { allowUnfinished?: boolean; }): Blob | undefined
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.maxSize: 100, }); constimageSet =
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
ProductImage.
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>
create({
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
image:
image: ({ original: FileStream | null; originalSize: [number, number]; placeholderDataURL: string | undefined; progressive: boolean; } & { [key: string]: FileStream | null; } & CoMap) | { ...; }
mainImage,
const mainImage: { original: FileStream | null; originalSize: [number, number]; placeholderDataURL: string | undefined; progressive: boolean; } & { [key: string]: FileStream | null; } & CoMap
thumbnail, });
thumbnail: ({ original: FileStream | null; originalSize: [number, number]; placeholderDataURL: string | undefined; progressive: boolean; } & { [key: string]: FileStream | null; } & CoMap) | { ...; }
Displaying Images
To use the stored ImageDefinition, there are two ways: the Image
react component, and the helpers functions.
<Image>
component
The Image component is the best way to let Jazz handle the image loading.
import * as React from "react"; import { co } from "jazz-tools"; const ImageDef = co.image(); // ---cut--- import { Image } from "jazz-tools/react"; function GalleryView({ image }: { image: co.loaded<typeof ImageDef> }) { return ( <div className="image-container"> <Image imageId={image.id} alt="Profile" width={600} /> </div> ); }
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< JSX.IntrinsicElements["img"], "src" | "srcSet" | "width" | "height" > & { 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" /> // <img src={...} /> with the highest resolution available <Image imageId="123" width="original" height="original" /> // <img width="1920" height="1080" /> <Image imageId="123" width="600" /> // <img width="600" /> leaving the browser to compute the height (might cause layout shift) <Image imageId="123" width="600" height="original" /> // <img width="600" height="338" /> keeping the aspect ratio <Image imageId="123" width="original" height="600" /> // <img width="1067" height="600" /> keeping the aspect ratio <Image imageId="123" width="600" height="600" /> // <img width="600" height="600" />
If the image was generated with progressive loading, the width
and height
props will determine the best resolution to use.
Lazy loading
The Image
component supports lazy loading based on browser's strategy. It will generate the blob url for the image when the browser's viewport reaches the image.
<Image imageId="123" width="original" height="original" loading="lazy" />
Imperative usage
Like other CoValues, ImageDefinition
can be used to load the object.
import {
ImageDefinition } from "jazz-tools"; const
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>
image = await
const image: CoMapLikeLoaded<{ original: FileStream | null; originalSize: [number, number]; placeholderDataURL: string | undefined; progressive: boolean; } & CoMap, { original: true; }, 10, []> | null
ImageDefinition.
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>
load("123", {
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<...>
resolve: {
resolve?: RefsToResolve<{ original: FileStream | null; originalSize: [number, number]; placeholderDataURL: string | undefined; progressive: boolean; } & CoMap, 10, []> | undefined
original?: RefsToResolve<FileStream, 10, [0]> | undefined
original: true, }, }); if(image) {
const image: CoMapLikeLoaded<{ original: FileStream | null; originalSize: [number, number]; placeholderDataURL: string | undefined; progressive: boolean; } & CoMap, { original: true; }, 10, []> | null
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 ```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:image.
const image: CoMapLikeLoaded<{ original: FileStream | null; originalSize: [number, number]; placeholderDataURL: string | undefined; progressive: boolean; } & CoMap, { original: true; }, 10, []>
originalSize: [number, number]
originalSize,placeholderDataUrl: string | undefined
placeholderDataUrl:image.
const image: CoMapLikeLoaded<{ original: FileStream | null; originalSize: [number, number]; placeholderDataURL: string | undefined; progressive: boolean; } & CoMap, { original: true; }, 10, []>
placeholderDataURL: string | undefined
placeholderDataURL,original: FileStream
original:image.
const image: CoMapLikeLoaded<{ original: FileStream | null; originalSize: [number, number]; placeholderDataURL: string | undefined; progressive: boolean; } & CoMap, { original: true; }, 10, []>
original: FileStream
original, // 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 {
loadImage } from "jazz-tools/media"; const
function loadImage(imageOrId: ImageDefinition | string): Promise<{ width: number; height: number; image: FileStream; } | null>
image = await
const image: { width: number; height: number; image: FileStream; } | null
loadImage(
function loadImage(imageOrId: ImageDefinition | string): Promise<{ width: number; height: number; image: FileStream; } | null>
const imageDefinitionOrId: string
imageDefinitionOrId); if(image) {
const image: { width: number; height: number; image: FileStream; } | null
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 ```console.Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)
[MDN Reference](https://developer.mozilla.org/docs/Web/API/console/log_static)log({width: number
width:image.
const image: { width: number; height: number; image: FileStream; }
width: number
width,height: number
height:image.
const image: { width: number; height: number; image: FileStream; }
height: number
height,image: FileStream
image:image.
const image: { width: number; height: number; image: FileStream; }
image: FileStream
image, }); }
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 {
loadImageBySize } from "jazz-tools/media"; const
function loadImageBySize(imageOrId: ImageDefinition | string, wantedWidth: number, wantedHeight: number): Promise<{ width: number; height: number; image: FileStream; } | null>
image = await
const image: { width: number; height: number; image: FileStream; } | null
loadImageBySize(
function loadImageBySize(imageOrId: ImageDefinition | string, wantedWidth: number, wantedHeight: number): Promise<{ width: number; height: number; image: FileStream; } | null>
const imageDefinitionOrId: string
imageDefinitionOrId, 600, 600); // 600x600 if(image) {
const image: { width: number; height: number; image: FileStream; } | null
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 ```console.Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)
[MDN Reference](https://developer.mozilla.org/docs/Web/API/console/log_static)log({width: number
width:image.
const image: { width: number; height: number; image: FileStream; }
width: number
width,height: number
height:image.
const image: { width: number; height: number; image: FileStream; }
height: number
height,image: FileStream
image:image.
const image: { width: number; height: number; image: FileStream; }
image: FileStream
image, }); }
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
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 the browser, the image manipulation is done using the canvas
API. 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) => { // ... }, });