Image

An Image renders a CanvasImageSource (such as an HTMLImageElement, HTMLCanvasElement, or ImageBitmap) to any context. When interpolated, the image crossfades from one source to another.

Example

Click Next Image to crossfade between images using interpolateImage.

Usage

import {
    createImage,
} from '@ripl/core';

const img = new Image();
img.src = '/photo.jpg';

img.onload = () => {
    const image = createImage({
        image: img,
        x: 50,
        y: 50,
        width: 200,
        height: 150,
    });
};

Properties

Property	Type	Required	Description
image	CanvasImageSource	Yes	The image source to render (e.g. HTMLImageElement, HTMLCanvasElement, ImageBitmap)
x	number	Yes	X coordinate of the top-left corner
y	number	Yes	Y coordinate of the top-left corner
width	number	No	Render width. Defaults to the source's intrinsic width.
height	number	No	Render height. Defaults to the source's intrinsic height.

Plus all Element style properties.

Interpolation

The interpolateImage factory produces a crossfade between two image sources. It composites both images onto an offscreen canvas, blending from one to the other over the transition.

import {
    interpolateImage,
} from '@ripl/core';

// Pass the interpolator directly as the state value
renderer.transition(imageElement, {
    duration: 800,
    state: { image: interpolateImage(currentImage, nextImage) },
});