Tasks
Dynamic Image Generator
Generate an image based on a Fabric.js object
This task allows you to use Fabric.js to generate an image based on a Fabric.js object. This is useful for creating images dynamically based on user input or other data.
You can use substitution to inject data from the stub into the image.
You can use Fabric Studio to build your Fabric.js canvas visually.
Use the Export JSON button to get the canvas JSON object, then save it into the task's canvas property.
To build the initial Fabric.js object you can use Claude
Try a prompt similar to this :
Please can you generate a fabric.js object that... [your description], please respond with the JSON object only.
Basic usage
Parameters
width number
The width of the image to generate in pixels.
height number
The height of the image to generate in pixels.
canvas object
The Fabric.js canvas object to use for generating the image. This should be a valid Fabric.js object.
file object
The details of the file to create such as the filename and content_type.
Result
Properties
file
The details of the file that was created.
Examples
Generate two red rectangles on an 800 X 600 image
Image generated :
Inject Stubref into image
Image generated :
Fabric Studio
You can use Fabric Studio to build your Fabric.js canvas visually. The studio lets you create and edit Fabric.js objects, preview the canvas in real time, and export the canvas JSON for use in the dynamic image generator task.
To use a canvas from Fabric Studio:
- Open Fabric Studio.
- Create or edit your canvas.
- Use
Export JSONto copy the Fabric.js canvas object. - Paste the exported JSON into the dynamic image generator task's
canvasproperty.
Fabric Studio can also load an existing Fabric.js canvas from the URL. Encode the canvas JSON as base64, then pass it in the load_json query parameter:
For example, if your canvas JSON is:
Base64 encode the JSON and add it to the URL:
If the encoded value contains URL-sensitive characters, URL encode the base64 string before adding it to load_json.