Annotate Images (Image Documents)

While it has always been possible to annotate images in PSPDFKit, doing so previously required some extra code. You had to convert an image to PDF, be sure to update the annotation tools and UI to only show relevant options, and extract the image data back when a save occurred.

In PSPDFKit 4.6 for Android, we introduced a new class, ImageDocument, to make this process much simpler. All you need to do is pass your image source to the ImageDocumentLoader or PdfActivity, and we handle the rest. To make usage inside PdfActivity even simpler, we provide a pre-built configuration that adjusts the UI so that it works great for images. Furthermore, image documents remain fully editable, even after saving them back to the original image file. Take a look at ImageDocumentExample in the Catalog app or read our announcement blog post to learn how you can annotate PNG and JPEG just like PDF with Image Documents.

ℹ️ Note: This feature requires the Image Documents component to be enabled in your license.

Loading Image Documents

ImageDocumentLoader provides several static methods that can be used to load ImageDocument instances from either a Uri or a DocumentSource. Supported image document formats are JPEG and PNG. Just like with PDF documents, image documents can be loaded from various sources, including the local file system, Android content providers, or the app’s assets.

Here’s how to load an image document from the app’s assets directory:

Copy
1
2
3
val uri = Uri.parse("file:///android_asset/image.png")
val imageDocument: ImageDocument = ImageDocumentLoader
    .openDocument(context, uri)
Copy
1
2
3
final Uri uri = Uri.parse("file:///android_asset/image.png");
final ImageDocument imageDocument = ImageDocumentLoader
    .openDocument(context, uri);

Loading into an Activity

Image documents can be shown and used inside a PdfActivity, just like normal PdfDocuments. To launch PdfActivity with an image document, you can use the static showImage() method of PdfActivity, which will load the image document for display inside the activity.

To simplify creation of a suitable PdfActivityConfiguration when displaying image documents, you can use getDefaultImageDocumentActivityConfiguration() on ImageDocumentLoader, which will provide the recommended settings:

Copy
1
2
3
4
val config: PdfActivityConfiguration = ImageDocumentLoader
    .getDefaultImageDocumentActivityConfiguration(context)

PdfActivity.showImage(context, Uri.fromFile(image), config)
Copy
1
2
3
4
final PdfActivityConfiguration config = ImageDocumentLoader
    .getDefaultImageDocumentActivityConfiguration(context);

PdfActivity.showImage(context, Uri.fromFile(image), config);

ℹ️ Note: If you want to launch a custom subclass of PdfActivity or need to specify additional Intent options, you can create an Intent for image document viewing using static methods on PdfActivityIntentBuilder — for example, fromImageUri().

Loading into a Fragment

PdfFragment

You can also load image documents into a PdfFragment instance using the static newImageInstance() methods on PdfFragment:

Copy
1
2
3
4
5
6
7
8
val uri = Uri.parse("file:///android_asset/image.png")
val config = ImageDocumentLoader.getDefaultImageDocumentConfiguration()
val fragment = PdfFragment.newImageInstance(uri, config)

supportFragmentManager
    .beginTransaction()
    .replace(R.id.container, fragment)
    .commit()
Copy
1
2
3
4
5
6
7
8
9
final Uri uri = Uri.parse("file:///android_asset/image.png");
final PdfConfiguration config = ImageDocumentLoader
    .getDefaultImageDocumentConfiguration();
final PdfFragment fragment = PdfFragment.newImageInstance(uri, config);

getSupportFragmentManager()
    .beginTransaction()
    .replace(R.id.container, fragment)
    .commit();

ℹ️ Note: Like with the activity, you can create a recommended PdfConfiguration instance for displaying image documents inside PdfFragment using the static helper methods on ImageDocumentLoader.

PdfUiFragment

When loading an image in a PdfUiFragment, you need to use PdfUiFragmentBuilder#fromImageUri() to create the PdfUiFragment:

Copy
1
2
3
4
5
6
7
8
9
10
11
val uri = Uri.parse("file:///android_asset/image.png")
val config: PdfActivityConfiguration = ImageDocumentLoader
    .getDefaultImageDocumentActivityConfiguration(context)
val fragment = PdfUiFragmentBuilder.fromImageUri(this, uri)
    .configuration(config)
    .build();

supportFragmentManager
    .beginTransaction()
    .replace(R.id.container, fragment)
    .commit()
Copy
1
2
3
4
5
6
7
8
9
10
11
final Uri uri = Uri.parse("file:///android_asset/image.png");
final PdfActivityConfiguration config = ImageDocumentLoader
    .getDefaultImageDocumentActivityConfiguration(context);
final PdfUiFragment fragment = PdfUiFragmentBuilder.fromImageUri(this, uri)
    .configuration(config)
    .build();

getSupportFragmentManager()
    .beginTransaction()
    .replace(R.id.container, fragment)
    .commit();

Coordinate System

The coordinate system of image documents is very similar to the one used for PDF documents. The zero point is at the bottom left, and it is sized to match the image that was opened.

Annotation Types

Although you can technically use any annotation type with ImageDocument, we recommend disabling certain annotation tools when working with image documents. For example, text selection- or text extraction-based annotations, such as highlight and underline annotations, do not make sense for an ImageDocument because there will be no selectable text in the document.

When using the preconfigured configuration instances returned by ImageDocumentLoader, these impractical annotation tools will be automatically disabled.

Saving

Saving has been designed to be transparent, i.e. to make ImageDocument instances behave just like PdfDocument instances. You can use any of the save methods on ImageDocument, which will handle saving all changes back to the original image file. By default, image documents will stay editable after saving. If you don’t need to retain editability, you can strip all document metadata in the saved image file, which will also reduce the final file size. To control how the backing image is saved, the ImageDocument#saveIfModified(metadata) method provides a parameter.

  • metadata: false — When saving, all the (visible) changes are saved back to the original image as is, and reopening this image will show these changes, but they will not be editable. When saving with this mode, any previously saved metadata in the document is removed as well.
  • metadata: true — This saves all changes to the original image as described above, but it also saves all the modifications as part of the image’s metadata. When an image saved using this mode is opened with a regular image viewer, all the changes made will be displayed on the original image. However, when an image is opened with ImageDocument, the saved changes will then be editable. Please be aware that using this option to save will increase the size of the images:
Copy
1
2
3
4
5
6
7
8
val imageDocument: ImageDocument

// By default, the image document is saved so that it stays editable.
imageDocument.saveIfModified()

// You can also strip all metadata, saving the image as non-editable.
val saveMetadata = false
imageDocument.saveIfModified(saveMetadata)
Copy
1
2
3
4
5
6
7
8
final ImageDocument imageDocument;

// By default, the image document is saved so that it stays editable.
imageDocument.saveIfModified();

// You can also strip all metadata, saving the image as non-editable.
final boolean saveMetadata = false;
imageDocument.saveIfModified(saveMetadata);

Saving inside an Activity

By default, PSPDFKit will auto-save image documents whenever the activity is closed or put into the background. You can find out more about auto-saving in our Annotation-Saving Mechanism guide.

If you want to manually save the image document, you can directly call the save() method on the used PdfFragment instance:

MyActivity.kt
1
2
// This will forward the save operation to the `ImageDocument` instance.
pdfFragment.save()
MyActivity.java
1
2
// This will forward the save operation to the `ImageDocument` instance.
getPdfFragment.save();

ℹ️ Note: If you want to receive save completion callbacks of image document-saving operations, you can register a DocumentListener instance using addDocumentListener() on PdfFragment.