@rifrocket/fdt-plugin-image

The "image" object type for Fabric Design Tool.

A pure engine plugin that registers an "image" object type — no built-in image object type ships anywhere else in the framework, so this is the only way to add images to the canvas.

Features

• Registers "image" via registerImageType — addressable through engine.addObjectOfType("image", ...)
• Images larger than 400px on their longest side are automatically scaled down to fit, unless you pass explicit scaleX/scaleY
• Loaded with crossOrigin: "anonymous" — remote images need CORS headers permitting that if you intend to export the canvas afterward (a tainted canvas can't be read for export)

interface ImageObjectConfig {
  src: string;
  left?: number;
  top?: number;
  scaleX?: number;
  scaleY?: number;
}

Included in both <DesignEditor preset="default"> and preset="minimal".

Install

npm install @rifrocket/fdt-plugin-image

Peer dependencies: fabric, react, react-dom. Depends on @rifrocket/fabricjs-design-tool and @rifrocket/fdt-plugin-media-fields.

Quick start

import { imagePlugin } from "@rifrocket/fdt-plugin-image";

engine.use(imagePlugin);

await engine.addObjectOfType("image", { src: imageDataUrlOrRemoteUrl });

Documentation

• Full plugin reference

License

MIT © Fabric Design Tool Contributors