Choose the tools
Show only the tools you need, set the crop shapes and sizes that fit your site, and limit how long a video can be.
The editor opens photos and videos with the tools that fit each one. You choose which tools it shows, which one it opens on, and the crop shapes your site needs.
Pick the tools
utils lists the tools to show, in order. util is the one the editor opens on.
appendDefaultEditor("#editor", {
utils: ["crop", "resize"],
util: "crop",
})| Util | Photos | Videos |
|---|---|---|
crop | Crop, Rotate and Flip | Crop, Rotate and Flip |
trim | – | Trim, and the sound switch |
redact | Pixelate or blur the parts your visitor marks | – |
filter | Black and white, and inverted colors | – |
resize | Resize to an exact width and height | Resize |
The default is all five. A util a file can't use is left out for it, so one editor can take both photos and videos. With only one util, set enableUtils: false to hide the tool switcher too.
Crop to a fixed shape
imageCropAspectRatio holds the crop to one shape, as width divided by height:
appendDefaultEditor("#editor", {
utils: ["crop"],
imageCropAspectRatio: 1, // square, for avatars
})Offer a choice of shapes and sizes
cropSelectPresetOptions gives your visitor shapes to choose from. Each is [ratio, label]. A ratio of undefined is a free crop. A [width, height] pair instead of a ratio crops to that shape and saves at that size.
appendDefaultEditor("#editor", {
cropSelectPresetOptions: [
[undefined, "Free"],
[1, "Square"],
[4 / 5, "Portrait"],
[16 / 9, "Wide"],
[[1500, 500], "Banner, 1500 × 500"],
],
})Shapes can also come in groups, as [groupLabel, [[ratio, label], …]]. Set cropEnableSelectPreset: false to hide the shape choice.
Turn off parts of the crop tool
These are all true unless you set them to false:
| Option | Shows |
|---|---|
cropEnableButtonRotateLeft | The turn-left button |
cropEnableButtonRotateRight | The turn-right button |
cropEnableRotationInput | The straighten slider (photos) |
cropEnableButtonFlipHorizontal | Flip across |
cropEnableButtonFlipVertical | Flip up and down |
cropEnableSelectPreset | The shape choice |
With both turn buttons and the slider off, the Rotate tab goes. With both flip buttons off, the Flip tab goes. cropRotationRange sets how far the slider straightens, in radians each way.
Limit a video's length
appendDefaultEditor("#editor", {
utils: ["trim"],
imageMaxDuration: 60, // seconds kept, at most
imageMinDuration: 3, // a shorter video is refused
trimEnableSplit: true, // keep several parts, joined back to back
})The buttons around it
| Option | Default | Does |
|---|---|---|
enableToolbar | true | The bar with Undo, Redo, Revert and Done |
enableButtonExport | true | Done |
enableButtonClose | false (modal: true) | Cancel, which sends close |
enableNavigateHistory | true | Undo and Redo |
enableButtonRevert | true | Revert to the file as it opened |
enableBrowseImage | true | Choose a file, when the editor has none |
enableDropImage | true | Drop a file on it, when it has none |
accept | "image/*,video/*" | The files it offers to open |
Without Done, call editor.processImage() from your own button. willClose() runs on Cancel; return false to keep the editor open.
Change the labels
locale sets the editor's button labels:
appendDefaultEditor("#editor", {
locale: {
labelButtonExport: "Save photo",
labelBrowse: "Choose a photo",
},
})The keys are labelButtonExport, labelButtonUndo, labelButtonRedo, labelButtonRevert, labelBrowse and labelWaiting.