Pintura Image Editor usage guides

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.

• Empty canvas

  Use an empty 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.

• Video thumbnail

  Use the processDefaultImage and trimWillRenderControls hook to snap a video thumbnail.

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

• Emoji picker

  Use the willRenderToolbar function to add custom controls

• Erase shapes

  Use the createMarkupEditorShapeStyleControls function to create custom shape style controls.

• Generate image

  Use the processImage property function to generate an image without loading the user interface.

• Get Base64 DataURL

  Convert a File object to a base64 encoded dataURL

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

• Load PDF pages

  Use the preprocessImageFile property on the createDefaultImageReader export to load a PDF page as an image

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

• Restore image state

  Use the imageState property to restore a previously stored image editor state

• Save GIF image

  Use the postProcessImageBlob property to add a watermark to the imageData before the output file is created.

• Style export button

  Use the willRenderToolbar and layoutVerticalToolbarPreference properties to adjust the style and position of the export button.

• Use custom fonts

  Use the createMarkupEditorShapeStyleControls function to create custom shape style controls.

• Edit file input image

  Use the openDefaultEditor factory to open an image when it's added to a file input

• Custom export button

  We can use willRenderToolbar to replace the default export button

• Face detection

  Using a third party script to automatically set the crop rectangle to the image subject.