Class ImgPen

ImgPen image editor instance class. Once created and preconfigured by ImgPen.constructor it can be used to access ImgPen API without passing a configuration again.

When installing ImgPen as SDK, please use the modern (recommended) way to import ImgPen class (in JavaScript or TypeScript):

import {ImgPen} from "imgpen";

or legacy way:

let ImgPen = require("imgpen");

If you use cloud version of ImgPen inside some WYSIWYG HTML editor, you already have ImgPen instance created and stored inside CKEDITOR.instances['id'].imgpen or TinyMCE.editors['id'].imgpen variable.

The shortest example of the image editor use:

import {ImgPen} from "imgpen";

let imgPen = new ImgPen({
    urlBase: 'https://example.com/imgpen'
});
imgPen.editImage({
    url: "https://example.com/some-image.png",
    onSave: function(file, onFinish) {
         // Do whatever you want with BLOB data stored in "file" variable
         // and then always call "onFinish(true)" if processed image successfully
         // or "onFinish(false)" otherwise.
         onFinish(true);
    }
});

Hierarchy

  • ImgPen

Index

Constructors

Methods

Constructors

constructor

  • new ImgPen(params: { colors?: string[]; cropRatios?: { h: number; w: number }[]; defaultText?: string; fonts?: { family: string; url: string }[]; isCustomCropEnabled?: boolean; jpegQuality?: number; removeDefaultColors?: boolean; removeDefaultCropRatios?: boolean; removeDefaultFonts?: boolean; removeDefaultShapes?: boolean; removeDefaultStickers?: boolean; shapes?: { freeScaling: boolean; path: string; title: string }[]; stickers?: string[]; tools?: string[]; urlBase: string }): ImgPen
  • Create a new instance of ImgPen image editor. Do this action once to preconfigure ImgPen, then you can call ImgPen.editImage method on the instance without passing these parameters every time.

    Example:

    import {imgPenLib} from "imgpen";
    
    let imgPen = imgPenLib.create({
       urlBase: 'https://example.com/imgpen'
    });

    Parameters

    • params: { colors?: string[]; cropRatios?: { h: number; w: number }[]; defaultText?: string; fonts?: { family: string; url: string }[]; isCustomCropEnabled?: boolean; jpegQuality?: number; removeDefaultColors?: boolean; removeDefaultCropRatios?: boolean; removeDefaultFonts?: boolean; removeDefaultShapes?: boolean; removeDefaultStickers?: boolean; shapes?: { freeScaling: boolean; path: string; title: string }[]; stickers?: string[]; tools?: string[]; urlBase: string }
      • Optional colors?: string[]

        The list of custom colors to use for tools (Brush, Text).

        default

        []

      • Optional cropRatios?: { h: number; w: number }[]

        The list of custom crop ratios. You can define it to fit your images to the formats you need. Each crop ratio must have two fields: w for width and h for height.

        default

        []

      • Optional defaultText?: string

        Text title for newly created object with text tool.

        default

        "Double click to edit"

      • Optional fonts?: { family: string; url: string }[]

        The list of custom fonts to use. Each font has fields:

        • family - font-family (its name)
        • url - an URL from where to load a font (null is correct value for browser standard fonts)
      • Optional isCustomCropEnabled?: boolean

        Is free form crop enabled. If you set it to true you will limit ImgPen end-users with the preset crop ratios list only.

        default

        false

      • Optional jpegQuality?: number

        Which quality is to use for JPEG images on saving.

        default

        95

      • Optional removeDefaultColors?: boolean

        Remove built-in colors and stay with custom colors only or use both.

        efault

        false

      • Optional removeDefaultCropRatios?: boolean

        Stay with custom crop ratios only or use built-in crop ratios too.

        default

        false

      • Optional removeDefaultFonts?: boolean

        Stay with custom crop ratios only or use built-in crop ratios too.

        default

        false

      • Optional removeDefaultShapes?: boolean

        If set to true removes all built-in shapes from the palette.

        default:

        false

      • Optional removeDefaultStickers?: boolean

        Remove default stickers or keep both built-in (default) stickers and custom ones.

        default

        false

      • Optional shapes?: { freeScaling: boolean; path: string; title: string }[]

        The list of shapes you want to add to the shapes gallery. Field path of a shape must be SVG path in 512x512 pixels area. freeScaling unlocks or locks proportional scaling of a shape by resize tool.

      • Optional stickers?: string[]

        The list of custom stickers. One URL per sticker. PNG, JPG, and SVG stickers supported.

        default

        []

      • Optional tools?: string[]

        The list of tools to use on the main toolbar of ImgPen. Use it to hide some tools or reorder them. By default all the tools are available. You can use all the tools from default value and | for a separator.

        default

        ["crop", "resize", "transform", "corners", "|", "filter", "|", "draw", "text", "shapes", "stickers"]

      • urlBase: string

        URL of the directory where ImgPen is stored in. It will be used to find all the assets of ImgPen.

    Returns ImgPen

Methods

editImage

  • editImage(params: { forcePng?: boolean; onCancel?: () => void; onSave: (file: File, onFinish: (doClose: boolean) => void) => void; url: string }): void
  • Calls ImgPen image editor dialog to edit a specified image. User will edit the image and you will receive a result image after he presses "Save" button. This method will not upload a result image to the server - it will only return data. Please use Flmngr.editImageAndUpload method if you need to upload an image back. Or call Flmngr.upload method manually. Or do whatever you want interacting with your own uploader.

    Parameters

    • params: { forcePng?: boolean; onCancel?: () => void; onSave: (file: File, onFinish: (doClose: boolean) => void) => void; url: string }

      Parameters list

      • Optional forcePng?: boolean
      • Optional onCancel?: () => void
          • (): void
          • Returns void

      • onSave: (file: File, onFinish: (doClose: boolean) => void) => void
          • (file: File, onFinish: (doClose: boolean) => void): void
          • Parameters

            • file: File
            • onFinish: (doClose: boolean) => void
                • (doClose: boolean): void
                • Parameters

                  • doClose: boolean

                  Returns void

            Returns void

      • url: string

    Returns void