Navigation Back to home

ImageEditor

An image editor for cropping and basic filters.

Import
the javascript logo
import { ImageEditor } from "@schukai/monster/source/components/content/image-editor.mjs";
Source
the git logo
Package
the npm logo
Since
4.68.0
Load the sample image, adjust crop or filters, then use Save.

Introduction

monster-image-editor provides an interactive editing surface for images, including common adjustments and crop-style workflows directly in the component.

Key Features

  • Interactive editing: Applies changes directly in the component UI.
  • Image workflow support: Fits upload, review, and correction steps.
  • Scriptable integration: Works with forms and custom application flows.

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.