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 the image to PDF, be sure to update the annotation tools and UI to show only 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
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 our
ImageDocumentExample in the Catalog app or read our announcement blog post to learn how you can annotate PNG and JPG 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.
1 2 3
val uri = Uri.parse("file:///android_asset/image.png") val imageDocument: ImageDocument = ImageDocumentLoader .openDocument(context, uri)
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
ImageDocumentLoader, which will provide the recommended settings:
1 2 3 4
val config: PdfActivityConfiguration = ImageDocumentLoader .getDefaultImageDocumentActivityConfiguration(context) PdfActivity.showImage(context, Uri.fromFile(image), config)
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
Loading into a Fragment
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()
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();
The coordinate system of image documents is very simliar 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.
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 pre-configured configuration instances returned by
ImageDocumentLoader, these impractical annotation tools will be automatically disabled.
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 just 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:
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)
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.
// This will forward the save operation to the ImageDocument instance. pdfFragment.save()
// This will forward the save operation to the ImageDocument instance. getPdfFragment.save();