Image Editor usage Examples
A collection of code examples that cover lots of popular use cases. Nearly all examples include a sandbox link so you can experiment with the code and play with the editor API before use.
-
Absolute font size
Use the
createMarkupEditorShapeStyleControls
function to create custom shape style controls. -
Add watermark
Use the
postProcessImageData
hook to add a watermark to theimageData
before the output file is created. -
Blank canvas
Use a blank canvas element as
src
to load a new blank image. -
Circular crop overlay
Use the
willRenderCanvas
property to adjust the preview image the editor renders. -
Compress image
Use the
quality
property on thecreateDefaultImageWriter
function to lower the image output quality. -
Crop square image
Use the
imageCropAspectRatio
property to instruct the editor to make a crop in a fixed aspect ratio. -
Crop stickers
Use the
willRenderShapeControls
property to add a crop button above a sticker shape. -
Download image
Use the
URL.createObjectURL
Web API to turn the editor file output into a URL and download it to the local file system. -
Generate image
Use the
processImage
property function to generate an image without showing or loading the user interface. -
Image preview
Use the
URL.createObjectURL
Web API to turn the editor file output into an image URL ready to set to an image element. -
Image upload
Use the
store
property to automatically upload output images to a server. -
Load HEIC image
Use the
preprocessImageFile
property on thecreateDefaultImageReader
export to add custom image loader logic. -
Apply circular mask
Use the
postProcessImageData
property to mask theimageData
before the output file is created. -
Basic photo editor
We use the
willRenderToolbar
hook to add buttons to the UI and create a basic photo editor. -
Text placeholders
Use the
preprocessImageState
hook to automatically replace placeholder values in text shapes. -
Replace sticker
Use the
willRenderShapeControls
property to add a select image button above a shape. -
Resize image
Use the
targetSize
property on thecreateDefaultImageWriter
function to automatically resize images. -
Save GIF image
Use the
postProcessImageBlob
property to add a watermark to theimageData
before the output file is created. -
Use custom fonts
Use the
createMarkupEditorShapeStyleControls
function to create custom shape style controls. -
Edit file input file
Use the
openDefaultEditor
factory to open a file when it's added to a file input