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

Replace And Reset Images

Loads an in-memory image with setImage() and restores it with the public reset method.

Javascript

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

const editor = document.getElementById("image-editor-reset");
const svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 180"><rect width="320" height="180" fill="#0089fc"/><circle cx="160" cy="90" r="54" fill="#72ff6c"/></svg>';
const source = `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;

document.getElementById("image-editor-load").addEventListener("click", () => {
  editor.setImage(source, {contentType: "image/svg+xml"});
});
document.getElementById("image-editor-clear").addEventListener("click", () => {
  editor.reset();
});

HTML

<section style="display:grid;gap:var(--monster-space-3)">
  <monster-image-editor id="image-editor-reset"></monster-image-editor>
  <div>
    <button id="image-editor-load" type="button">Load sample</button>
    <button id="image-editor-clear" type="button">Reset edits</button>
  </div>
</section>

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.

Customizing With Parts

You can adapt the visual appearance through exported parts instead of modifying the internal template. This reference is generated from the current component source.

The component exposes these part names:

applyFilterButton: Element representing the apply filter button.
control: Outer wrapper of the component.
cropButton: Element representing the crop button.
resetButton: Element representing the reset button.
rotateLeftButton: Element representing the rotate left button.
rotateResetButton: Element representing the rotate reset button.
rotateRightButton: Element representing the rotate right button.
saveButton: Element representing the save button.
selectButton: Element representing the select button.

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

Enable crop tools

features.allowFilters

boolean

true

Enable filter tools

features.fetchUrl

boolean

true

Fetch URLs as blobs before loading

features.crossOrigin

boolean

true

Set crossOrigin for URLs

output

object

Output configuration

output.type

string

image/png

Output MIME type

output.quality

number

0.92

Output quality for lossy 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(options)

Parameters

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

Returns

{HTMLElement}

Adds a custom action button into the toolbar.

reset()

Returns

{Promise<void>|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<Blob|null>}

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,[options])

Parameters

data {(blob|arraybuffer|uint8array|string)}: data
[options] {object}: Optional content type and original-image storage settings.

Returns

{Promise<void>}

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[]}

No description available.

getTag()

Returns

{string}

No description available.

observedAttributes()

Returns

{string[]}

No description available.

Lifecycle methods

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

[assembleMethodSymbol]()

Returns

{Components.Content.ImageEditor

No description available.

attributeChangedCallback(name,oldValue,newValue)

Parameters

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

No description available.

connectedCallback()

Returns

{void}

No description available.

disconnectedCallback()

Returns

{void}

No description available.

Other methods

load(url)

Parameters

url {string}: url

Returns

{Promise<void>}

Load an image from a URL.

save()

Returns

{Promise<Blob|null>}

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.