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

Image Drag and drop a file here

({
  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.