Search

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 the imageData 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 the createDefaultImageWriter 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 the createDefaultImageReader export to add custom image loader logic.

  • Apply circular mask

    Use the postProcessImageData property to mask the imageData 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 the createDefaultImageWriter function to automatically resize images.

  • Save GIF image

    Use the postProcessImageBlob property to add a watermark to the imageData 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