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 parameter
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 parameter
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 parameter
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 parameter
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 parameter
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 parameter
ImgPen.resizeMinWidth
Type
number
Default
null

In pixels

API parameter
ImgPen.resizeMinHeight
Type
number
Default
null

In pixels

API parameter
ImgPen.resizeMaxWidth
Type
number
Default
null

In pixels

API parameter
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 parameter
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 parameter
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 parameter
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 parameter
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 parameter
ImgPen.removeDefaultStickers
Type
boolean
Default
null

Shapes

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

API parameter
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 parameter
ImgPen.removeDefaultShapes
Type
boolean
Default
null