Add Annotations to Images on iOS
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 7.3 for iOS, we introduced a new class,
ImageDocument, to make this process much simpler. All you need to do is pass your image to
ImageDocument, and we handle the rest. We even simplified the PDF controller configuration by providing a prebuilt configuration that adjusts the UI so that it works great for images. And to make editing these images more powerful, we introduced a system in PSPDFKit 7.6 for iOS where the changes made to an image document by
PDFViewController (or by directly using the document object) remain editable even after saving. Take a look at
AnnotateImagesExample in the Catalog app or read our announcement blog post to learn how you can annotate PNG, JPEG, and TIFF images just like a PDF with Image Documents.
ℹ️ Note: This feature requires the Image Documents component to be enabled in your license.
If you need to use an image as an annotation in another document, see our guide on image annotations.
Image Formats and Size
You can initialize an
ImageDocument using a local image file URL.
ImageDocument supports the JPEG, PNG, and TIFF file formats. The compression quality when encoding to JPEG can be controlled using
We also enforce a maximum size of image that can be opened by
ImageDocument. If an image’s area is larger than the area defined by
PSPDFRenderSizeLimit, the image is not opened, as converting it to a bitmap would consume too much RAM.
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, don’t make sense for an
ImageDocument because there will be no selectable text in the document.
let controller = PDFViewController(document: imageDocument, configuration: PDFConfiguration.image)
PSPDFViewController *controller = [[PSPDFViewController alloc] initWithDocument:imageDocument configuration:PSPDFConfiguration.imageConfiguration];
Customizing the UI
We also recommend only exposing relevant UI elements to your users. For example, you can disable the document editing feature to disallow adding new pages to an image document. Here’s a basic UI customization for a
PDFViewController presenting an
let rightItems = [controller.annotationButtonItem, controller.activityButtonItem, controller.searchButtonItem] let leftItems = [controller.outlineButtonItem, controller.brightnessButtonItem] controller.navigationItem.setRightBarButtonItems(rightItems, for: .document, animated: false) controller.navigationItem.setLeftBarButtonItems(leftItems, for: .document, animated: false) controller.navigationItem.leftItemsSupplementBackButton = true
NSArray<UIBarButtonItem *> *rightItems = @[controller.annotationButtonItem, controller.activityButtonItem, controller.searchButtonItem]; NSArray<UIBarButtonItem *> *leftItems = @[controller.outlineButtonItem, controller.brightnessButtonItem]; [controller.navigationItem setLeftBarButtonItems:rightItems forViewMode:PSPDFViewModeDocument animated:NO]; [controller.navigationItem setLeftBarButtonItems:leftItems forViewMode:PSPDFViewModeDocument animated:NO]; controller.navigationItem.leftItemsSupplementBackButton = YES;
AnnotateImagesExample from PSPDFKit Catalog for more details.
To control how the backing image is saved by
ImageDocument, use the
imageSaveMode property. This property has two valid values:
ImageDocument.SaveMode.flatten— When an
ImageDocumentis saved, 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.
ImageDocument.SaveMode.flattenAndEmbed— This performs everything
ImageDocument.SaveMode.flattendoes, 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.
ImageDocument also supports serialization and deserialization via the
NSSecureCoding protocol. If you need to preserve editing abilities for an image document between application launches, you can simply archive and unarchive it using the standard iOS serialization APIs.
ℹ️ Note: For the save mode to take effect, it must be changed before a save is performed.