ImageEditor

An image editor for cropping, rotation and lightweight visual adjustments before upload or storage.

Import

import { ImageEditor } from "@schukai/monster/source/components/content/image-editor.mjs";

Source

View source code

Package

@schukai/monster

Since

4.68.0

Load the sample image, adjust crop or filters, then use Save.

Introduction

The Monster ImageEditor prepares images before they are stored or uploaded. Use it when cropping, rotation or small visual corrections should happen directly in the browser.

When to use ImageEditor

Use it for upload preparation: Users can correct the image before it enters the backend workflow.
Use it for lightweight editing: Basic adjustments fit well; full design editing does not.
Do not use it as a full graphics tool: Complex image authoring belongs in specialized editors.

Basic Editor Workflow

This example loads a prepared artwork into monster-image-editor and reports the generated asset when the built-in save action is used.

Waiting for save event.

Javascript

import "@schukai/monster/source/components/content/image-editor.mjs";

const editor = document.getElementById("image-editor-basic");
const log = document.getElementById("image-editor-basic-log");

const imageSvg = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360">
  <rect width="640" height="360" fill="#f6f6f6"/>
  <rect x="40" y="40" width="560" height="280" rx="24" fill="#d4e0ff"/>
  <circle cx="180" cy="160" r="72" fill="#72ff6c"/>
  <rect x="290" y="105" width="210" height="110" rx="20" fill="#0089fc"/>
  <text x="60" y="300" font-size="42" font-family="sans-serif" fill="#00386d">Monster Media Kit</text>
</svg>
`.trim();

editor.setOptions({
  source: {
    url: `data:image/svg+xml;utf8,${encodeURIComponent(imageSvg)}`,
  },
  features: {
    allowCrop: true,
    allowFilters: true,
    fetchUrl: false,
  },
  output: {
    type: "image/png",
  },
});

editor.addEventListener("monster-image-editor-saved", (event) => {
  const type = event.detail?.contentType || "image/png";
  const value = event.detail?.value || "";
  log.textContent = `Saved ${type} output (${Math.round(value.length / 1024)} KB).`;
});<script type="module">import "@schukai/monster/source/components/content/image-editor.mjs";

const editor = document.getElementById("image-editor-basic-run");
const log = document.getElementById("image-editor-basic-log-run");

const imageSvg = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360">
  <rect width="640" height="360" fill="#f6f6f6"/>
  <rect x="40" y="40" width="560" height="280" rx="24" fill="#d4e0ff"/>
  <circle cx="180" cy="160" r="72" fill="#72ff6c"/>
  <rect x="290" y="105" width="210" height="110" rx="20" fill="#0089fc"/>
  <text x="60" y="300" font-size="42" font-family="sans-serif" fill="#00386d">Monster Media Kit</text>
</svg>
`.trim();

editor.setOptions({
  source: {
    url: `data:image/svg+xml;utf8,${encodeURIComponent(imageSvg)}`,
  },
  features: {
    allowCrop: true,
    allowFilters: true,
    fetchUrl: false,
  },
  output: {
    type: "image/png",
  },
});

editor.addEventListener("monster-image-editor-saved", (event) => {
  const type = event.detail?.contentType || "image/png";
  const value = event.detail?.value || "";
  log.textContent = `Saved ${type} output (${Math.round(value.length / 1024)} KB).`;
});</script>

HTML

<div id="image-editor-basic-demo" style="display:grid;gap:var(--monster-space-4);">
  <monster-image-editor id="image-editor-basic"></monster-image-editor>
  <div
    id="image-editor-basic-log"
    style="padding:var(--monster-space-4);border:1px solid var(--monster-color-border-2);border-radius:var(--monster-border-radius);background:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1);"
  >
    Waiting for save event.
  </div>
</div>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

The component wraps image processing controls and an editable preview surface in a single custom element that can be embedded in forms or media workflows.

Styling Hooks

data-monster-option-*: Configures the editor behavior.
value: Connects the edited result to surrounding logic.
::part(...): Styles exposed editor controls and preview areas.

HTML Structure

<monster-image-editor></monster-image-editor>

JavaScript Initialization

const element = document.createElement('monster-image-editor');
document.body.appendChild(element);

Exported

ImageEditor

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

source

object

Source configuration

source.url

string|null

URL to load an image from

source.data

Binary data to load an image from

source.contentType

string

image/png

Content type for binary data

features

object

Feature configuration

features.allowCrop

boolean

true

features.allowFilters

boolean

true

features.fetchUrl

boolean

true

ore loading

features.crossOrigin

boolean

true

output

object

Output configuration

output.type

string

image/png

output.quality

number

0.92

ossy formats

labels

object

undefined

Labels

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Constructor

constructor()

Constructor for the ImageEditor class. Calls the parent class constructor.

Behavioral methods

addActionButton()

Parameters

undefined {{label?:string,onclick?:function,classes?:string}}: options

Returns

{HTMLElement}

Adds a custom action button into the toolbar.

reset()

Returns

{Promise|void}

Reset the editor to the original image and clear edits.

Structural methods

getImageBlob(type,quality)

Parameters

type {string}: [type]
quality {number}: [quality]

Returns

{Promise}

Returns a blob for the current image state.

getImageDataUrl(type,quality)

Parameters

type {string}: [type]
quality {number}: [quality]

Returns

{string|null}

Returns a data URL for the current image state.

setImage(data,)

Parameters

data {(blob|arraybuffer|uint8array|string)}: data
undefined {object}: [options]

Returns

{Promise}

Sets the image source from binary data or a URL.

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

observedAttributes()

Returns

{string[]}

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Returns

{Components.Content.ImageEditor

attributeChangedCallback(name,oldValue,newValue)

Parameters

name {string}: name
oldValue {string|null}: oldValue
newValue {string|null}: newValue

connectedCallback()

Returns

{void}

disconnectedCallback()

Returns

{void}

Other methods

load(url)

Parameters

url {string}: url

Returns

{Promise}

Load an image from a URL.

save()

Returns

{Promise}

Save the current image and emit a save event.

Events

The component emits the following events:

monster-image-editor-saved

For more information on how to handle events, see the mdn documentation.

The current width of the area is too small to display the content correctly.