ThumbnailEditor Class

Show Source

Simple image editor used to create a thumbnail of an image. Provides controls to center, resize, and crop a source image.

Constructors

ThumbnailEditor( parent, config )

Show Source

Used to instantiate this class

parent	DOM element in which to render this component
config	Configuration settings (optional). See config options for more information.

Config Options

thumbnailWidth

Width of the editor

Show Source

thumbnailHeight

Height of the editor

Show Source

mask

Used to render a mask over the image

Show Source

sliders

If true, will render a slider used to resize the image. Otherwise, the slider is hidden from view. Default is true.

Show Source

readOnly

If true, will prevent users from resizing or moving the image. Default is false.

Show Source

style

Style for individual elements within the component. Note that you can provide CSS class names instead of individual style definitions.

Show Source

Events

onChange( )

Called whenever the a new image is added or adjusted

Show Source

Public Methods

setImage( src )

Used to update the panel with a source image.

src	Image source (url or Base64 image data) used as the "src" attribute in the main image panel.

Show Source

getImage( format, returnBase64 )

Returns image data, cropped and scaled to match the thumbnail preview. Image data is returned as a Blob. The data can be rendered in a "img" element by converting the Blob to a Base64 encoded string. Example:

img.src = URL.createObjectURL(data);

format	Image format (e.g. jpg, png, webp, etc). Supported formats vary from browser to browser.
returnBase64	If true, returns a Base64 encoded string representing the image. Otherwise, returns a Blob. Default is false.

Show Source