v8.48.3

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.

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

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

  • 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

  • Face detection

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