Editing ImgPen image editor configuration

A set of options used to customize ImgPen image editor is listed below.

Image Editor settings screenshot
Image Editor settings

Force PNG

Always save edited images in PNG format. PNG format is recommended due to it supports transparency and keeps quality without changes from save to save.

API key
ImgPen.forcePng
Type
boolean
Default
true

JPEG quality

Quality in percents used when saving image into JPG/JPEG format. Used only when 'Force PNG' flag is unset.

API key
ImgPen.jpegQuality
Type
number
Default
95

From 1 (low image quality, less file size) to 100 (high image quality, large file size)

Tools

The list of tools will be shown on the main ImgPen toolbar.

API key
ImgPen.tools
Type
string[]
Default
null
Valid values
crop, resize, transform, corners, filter, draw, text, shapes, stickers, |

Combine your own toolbar ('|' means separator).

Custom colors

Customize the color palette with your own website colors with this option.

API key
ImgPen.colors
Type
string[]
Default
null

Colors in HEX notation (like #A055FF)

Remove default colors

Check this checkbox to clear the default colors list and use only custom one.

API key
ImgPen.removeDefaultColors
Type
boolean
Default
null

Minimum and maximum resize widths and heights

ImgPen will not resize images less than specified minimum values or more than maximum values.

API key
ImgPen.resizeMinWidth
Type
number
Default
null

In pixels

API key
ImgPen.resizeMinHeight
Type
number
Default
null

In pixels

API key
ImgPen.resizeMaxWidth
Type
number
Default
null

In pixels

API key
ImgPen.resizeMaxHeight
Type
number
Default
null

In pixels

Crop ratios

If you need to adopt all images inside your content to some predefined aspect ratios, define them for crop tools too.

API key
ImgPen.cropRatios
Type
{w: number, h: number}[]
Default
null

In abstract units

Remove default crop ratios

Check this checkbox to clear the default crop ratios list and use only custom one

API key
ImgPen.removeDefaultCropRatios
Type
boolean
Default
null

Fonts

If your website uses some custom fonts and you wish to add captions on your images with these fonts, add links to the fonts here.

API key
ImgPen.fonts
Type
{family: string, url: string}[]
Default
null

Absolute URLs are recommended

Stickers

Custom stickers will be added to the special sticker category in the ImgPen dialog.

API key
ImgPen.stickers
Type
string[]
Default
null

Array of URLs to PNG/SVG stickers.

Remove default stickers

Check this checkbox to clear the default stickers list and use only custom one.

API key
ImgPen.removeDefaultStickers
Type
boolean
Default
null

Shapes

You can extend the list of shapes by typing SVG paths in this section.

API key
ImgPen.shapes
Type
{title: string, path: string, freeScaling: boolean}[]
Default
null

Remove default shapes

Check this checkbox to clear the default shapes list and use only custom one.

API key
ImgPen.removeDefaultShapes
Type
boolean
Default
null