Image

The image field can be used to accept files by browsing the file system, or simply by dragging and dropping an image onto the field. It can also be used to render an image to be downloaded.

When used as an input, make receives an object with “canvas”, “src” and “data” properties. See blurring an image for an example.

Example

({
  type: "image",
  label: "Image",
})

Options

Input

Use these options when using the field with take.

key?
string
A key to access the value. If provided, each field must have a unique key. See make for more information about accessing values.
label?
string
A label describing the purpose of the field.
detail?
string
Additional information about the field, disclosed in a tooltip.

Output

Use these options when using the field with make.

value?
HTMLCanvasElement |‌ OffscreenCanvas |‌ DataURL |‌ string
A canvas on which the image content is drawn, or a string representing the image as a data URL. Use the format option to convert strings to data URLs.
format?
"jpeg" |‌ "png" |‌ "svg"
The output format used to render the image. When value is a string (not a data URL), format is required to determine the correct mimetype to display the image. Use mimetype to specify alternative formats not provided by the format shorthand.
mimetype?
string
Use a specific mimetype other than those provided by format.
filename?
string
The name of the file to use if the user downloads the image.
label?
string
A label describing the purpose of the field.
detail?
string
Additional information about the field, disclosed in a tooltip.

Data

If no selection has been made, this input value is an empty object. Otherwise, the value passed to make is an object containing these properties.

canvas?
OffscreenCanvas |‌ HTMLCanvasElement
A canvas on which the image has been drawn. The type of canvas depends on browser support and the context in which the process is run.
src?
string
A string containing a data URL representing the image.
data?
ImageData
An array representing the underlying pixel data of an the image.