Adding annotations to images

This guide explains how to annotate images using Nutrient MAUI SDK. The process involves converting an image to a PDF, configuring annotation tools and the user interface (UI) to display only relevant options, and extracting the image data upon saving.

Try for free Launch demo

This feature requires the Image Documents component to be enabled in your license.

Loading image documents

To load an image as a document in Nutrient Web SDK, use the PSPDFKit#load() method. You can pass a blob, an array buffer, or a URL to the document option, and the SDK will treat the image as a PDF document:

var document = await PSPDFKitController.LoadDocumentFromAssetsAsync(
        "image.jpg",
        PSPDFKitController.CreateViewerConfiguration());

For more information on loading options, see our guides on [importing a PDF document][import a pdf].

## Adding annotations on the image

You can annotate images using the Annotation API provided by MAUI SDK. Below is an example of how to create a line annotation and add it to a document:

```csharp
// Create image as an annotation.
var annotations = _annotationManager.AnnotationFactory.CreateAnnotation<Line>();
// Specify properties such as bounding box and pages.
annotations.StartPoint = new PointF(10, 10);
annotations.EndPoint = new PointF(100, 100);
annotations.BoundingBox = new Rectangle
{
    Left = 0,
    Top = 0,
    Width = 100,
    Height = 100
};
// Add the annotation to the document.
await _annotationManager.AddAnnotationAsync(annotations);

The example above demonstrates how to create a line annotation with specific starting and ending points, as well as a bounding box. For more details on creating annotations, refer to the create PDF annotations in our MAUI viewer guide.

Exporting image documents

Once your annotations are complete, you can export the image document using _document.ExportDocumentAsync. You can also export it to Instant JSON using native APIs or XFDF by bridging JavaScript APIs.