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
A canvas on which the image content is drawn, or a string representing the image as a data url.
format?
"jpeg" | "png"
The output format used to render the image. If the value is a data url, then this property is ignored.
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.