Annotations
While there is no dedicated tool for annotations, PhotoEditor SDK can easily be configured to include the features necessary for a powerful yet simple-to-use photo annotation tool. To this end we only enable features that are useful to annotate objects in a photo:
- brush tool for flexible marking and colored highlights
- sticker tool for including shapes such as arrows, tags or badges
- text tool to provide information around annotation markers
Configuring menu items#
Since we only want to include the three above mentioned tools, we only add those tools to the configuration.
Stickers#
We want to omit stickers that are not annotation specific, but rather add shapes such as arrows, tags or badges.
To that end, we group suitable existing stickers in a custom StickerCategory
and load this into the configuration
.
Consult the sticker configuration section for more details.
Open editor#
Finally, we load the previously created configuration
into the editor for the customizations to take effect.
For a detailed explanation of how to configure different editor views, refer to this guide.
import { Configuration, PESDK, Tool } from "react-native-photoeditorsdk";export const photoAnnotationExample = async (): Promise<void> => {// Add a photo from the assets directory.const photo = require("../../../../assets/pesdk/LA.jpg");// Create a `Configuration` object.const configuration: Configuration = {// For this example only the sticker, text, and brush tool are enabled.tools: [Tool.STICKER, Tool.TEXT, Tool.BRUSH],// For this example only stickers suitable for annotations are enabled.sticker: {categories: [{identifier: "annotation_stickers",name: "Annotation",thumbnailURI: require("../../../../assets/sticker_thumbnail.png"),items: [{ identifier: "imgly_sticker_shapes_arrow_02" },{ identifier: "imgly_sticker_shapes_arrow_03" },{ identifier: "imgly_sticker_shapes_badge_11" },{ identifier: "imgly_sticker_shapes_badge_12" },{ identifier: "imgly_sticker_shapes_badge_36" },],},],},};try {// Open the photo editor and handle the export as well as any occuring errors.const result = await PESDK.openEditor(photo, configuration);// highlight-eventsif (result != null) {// The user exported a new photo successfully and the newly generated photo is located at `result.image`.console.log(result.image);} else {// The user tapped on the cancel button within the editor.return;}} catch (error) {// There was an error generating the photo.console.log(error);}};