Working with Images
There is a collection of top level functions provided for adding and manipulating images in Framer.
Adding Images to the canvas
To add an image to the canvas you use the addImage
method.
Setting an image on the selected node
To add an image to the current selection you can use the setImage
method.
This will apply the image to the current selected Node if it supports setting an image. If a Component Node is selected with a single Image control prop, it will also set the image.
Image resolution
All image-related methods allow you to set the resolution to "auto"
(default), "lossless"
, "small"
, "medium"
, "large"
or "full"
, same as through the UI. Effects of each are described in this help article.
Uploading images without assigning them to a node
You can also upload images to framer without assigning them to a node on the canvas. The API looks similar.
Getting an image from selection
The simplest way to get an image is to use the getImage()
function. This will get the image of the current selection if it exists. An example usage looks like this:
To listen to image changes, you can use the subscribeToImage
listener. Here is that abstracted into a hook.
Modifying the alt text of an image
In some cases you may want to modify the alt text of an Image without changing the image.
Example: Image Processing
Some plugins may be designed to manipulate images. For these cases, we provide raw image bytes and some utilities to perform image manipulation. A convenient way to perform image manipulation is by rendering the Image bitmap on a HTML canvas. An example implementation of bytesFromCanvas can be found in this gist.
Working with Files
Code components can be configured to accept files by adding ControlType.File
to the component's property controls. A Plugin can upload files to Framer and assign them to the component's controls using the following code.
Working with SVGs
Adding an SVG uses the addSVG
async function. You can pass in the html for the SVG itself, along with a name of your choosing. Only SVG smaller than 4kb is accepted.