Image and layout building blocks

All optional props without a default remain undefined. class accepts Svelte ClassValue; style is a CSS string.

These primitives require and provide no cropper context. Supply their data and callbacks explicitly. Unless listed, they have no exported instance methods. Container children are optional Snippet values rendered without arguments.

CropperWrapper

Fades its children in when the cropper has state and is loaded. It keeps children mounted while loading. Its optional cropper needs getState, isLoading and isLoaded.

CropperWrapperSource is a local name for this exact structural contract, not an exported type:

interface CropperWrapperSource {
	getState: () => CropperState | null;
	isLoading: () => boolean;
	isLoaded: () => boolean;
}

Spread the Cropper or FixedCropper wrapper argument (CropperWrapperSnippetProps<E>) into this primitive. For a preview’s wrapper snippet, use CropperPreviewWrapper, which accepts preview.

Selectors are listed in the complete styling inventory.

StretchableBoundary

Registers boundary measurement with the owning cropper or preview. Exposes reset(): void and stretchTo(size: Size | null): Promise<Size | null> through bind:this, typed as BoundaryHandle. Registration cleanup runs on destruction.

Selectors are listed in the complete styling inventory.

CropperBackgroundWrapper

Connects TransformableImage to transformImage and transformImageEnd. The cropper also supplies getTransitions. Active transitions disable gestures. An omitted timeout uses the gesture primitive default of 500 ms.

CropperBackgroundWrapperSource is a local name for this exact structural contract, not an exported type:

interface CropperBackgroundWrapperSource {
	transformImage: (transform: ImageTransform) => void;
	transformImageEnd: () => void;
	getTransitions: () => CropperTransitions;
}

Spread the Cropper or FixedCropper backgroundWrapper argument (CropperBackgroundWrapperSnippetProps<E>) into this primitive. CropperPreview has no backgroundWrapper snippet.

Selectors are listed in the complete styling inventory.

CropperBackgroundImage

Draws the displayed image using getBackgroundStyle. The cropper supplies getState, getTransitions and getImage. Forward attachSource from a background snippet for canvas export.

CropperBackgroundImageSource is a local name for this exact structural contract, not an exported type:

interface CropperBackgroundImageSource {
	getState: () => CropperState | null;
	getTransitions: () => CropperTransitions;
	getImage: () => CropperImage | null;
}

Spread the Cropper or FixedCropper background argument (CropperBackgroundSnippetProps<E>) into this primitive. For a preview’s background snippet, use CropperPreviewBackground, which accepts preview and the fitted size.

Selectors are listed in the complete styling inventory.

CropperSource

Hidden source image for custom drawing. bind:element exposes HTMLImageElement or null; changing src replaces the image element. Also accepts HTMLImgAttributes except src and lowercase crossorigin, which are replaced by the props listed here.

Selectors are listed in the complete styling inventory.

CropperPreviewWrapper

Fades children according to preview.isLoaded(). The optional preview requires only isLoaded and may be null.

CropperPreviewWrapperSource is a local name for this exact structural contract, not an exported type:

interface CropperPreviewWrapperSource {
	isLoaded: () => boolean;
}

Spread the CropperPreview wrapper argument (CropperPreviewWrapperSnippetProps) into this primitive. It receives preview; cropper wrapper arguments instead receive cropper and belong with CropperWrapper.

Selectors are listed in the complete styling inventory.

CropperPreviewBackground

Positions the image with getPreviewStyle and the fitted size. The required preview supplies getState, getImage and getTransitions; transitions may be null. No export registration is needed.

CropperPreviewBackgroundSource is a local name for this exact structural contract, not an exported type:

interface CropperPreviewBackgroundSource {
	getState: () => CropperState | null;
	getTransitions: () => CropperTransitions | null;
	getImage: () => CropperImage | null;
}

Spread the CropperPreview background argument (CropperPreviewBackgroundSnippetProps) into this primitive, including preview and size. Cropper background arguments belong with CropperBackgroundImage.

Selectors are listed in the complete styling inventory.

Canvas export

The output and scratch canvases are internal. Use CropperInstance.getCanvas() to draw a crop; use the background snippet’s attachSource to supply custom pixels. The internal canvas and transition elements have stable selectors but are not public component exports.