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.
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.
In case you load ImgPen from JS file manually, please use window.imgpen["create"](...) function (do not forget to wait until library is loaded and window.imgpen is set), it is equivalent to new ImgPen(...) call.
Example:
import {imgPenLib} from "imgpen";
let imgPen = imgPenLib.create({});The list of custom colors to use for tools (Brush, Text).
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.
Text title for newly created object with text tool.
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)Always save as PNG or keep source format.
Is free form crop enabled. If you set it to true you will limit ImgPen end-users with the preset crop ratios list only.
Which quality is to use for JPEG images on saving.
Remove built-in colors and stay with custom colors only or use both.
Stay with custom crop ratios only or use built-in crop ratios too.
Stay with custom crop ratios only or use built-in crop ratios too.
If set to true removes all built-in shapes from the palette.
Remove default stickers or keep both built-in (default) stickers and custom ones.
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.
The list of custom stickers. One URL per sticker. PNG, JPG, and SVG stickers supported.
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.
URL of the directory where ImgPen is stored in. It will be used to find all the assets of ImgPen. Required only if you need to relocate assets from the official cloud.
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 list
Optional filename without extension to set (force) into "file" object passed to "onSave". If not set, this function will try to autodetect it or use "image" as default
A callback called when user cancelled editing without saving an image
A callback which will be called when user clicks on save button. Always call "onFinish" callback to approve or decline dialog closing
URL to get original image from (or Base64 source)
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 "@edsdk/imgpen";or legacy way:
let ImgPen = require("@edsdk/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'].imgpenorTinyMCE.editors['id'].imgpenvariable.In case you load ImgPen from JS file manually, please use
window.imgpen["create"](...)function (do not forget to wait until library is loaded andwindow.imgpenis set), it is equivalent tonew ImgPen(...)call.The shortest example of the image editor use:
import {ImgPen} from "imgpen"; let imgPen = new 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); } });