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.

• 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.

• 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 postProcessImageData property to add a watermark to the imageData before the output file is created.

• Apply circular mask

  Use the postProcessImageData property to mask the imageData before the output file is created.

• Text placeholders

  Use the preprocessImageState hook to automatically replace placeholder values in text shapes.

• Resize image

  Use the targetSize property on the createDefaultImageWriter function to automatically resize images.

• Use custom fonts

  Ue the createMarkupEditorShapeStyleControls function to create custom shape style controls.