> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/annotation/annotation-types/stampannotation.md). # Work with Stamp Annotations in WebViewer Learn how to use stamp annotations in PDF documents. Stamp annotations allow users to place versatile image annotations on any page. Create custom stamps with WebViewer and sign documents easily. The Stamp annotations allow users to place an image annotation onto any page on the document. It is the most versatile annotation since you can draw anything as its content. Rubber stamps are also stamp annotations and the PDF specification defines a standard set of rubber stamps. WebViewer also provides the ability to create custom stamps by setting the text of the stamp annotation. Along with free hand signature annotations, stamp annotations can also be used to sign a signature field. ![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-a45272cf5408ba99052a8babeed239237869d5dd%2Fef41b9e76a17b62f755297999b811469ef94b4a6-322x255.png?alt=media) ## Instantiation {% tabs %} {% tab title="JavaScript (SDK v8.0+)" %} {% code lineNumbers="true" %} ```js WebViewer(...) .then(instance => { const { documentViewer, annotationManager, Annotations } = instance.Core; documentViewer.addEventListener('annotationsLoaded', async () => { const res = await fetch('https://myserver/files/myImage.png'); // Include custom headers as necessary const imageBlob = await res.blob(); const reader = new FileReader(); reader.onloadend = async () => { const annot = new Annotations.StampAnnotation({ PageNumber: 1, X: 100, Y: 50, Width: 25, Height: 25, }); const base64data = reader.result; await annot.setImageData(base64data); // Base64 URL or SVG annotationManager.addAnnotation(annot); annotationManager.redrawAnnotation(annot); } reader.readAsDataURL(imageBlob); }); }); ``` {% endcode %} [DocumentViewer#annotationsLoaded](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:annotationsLoaded) [StampAnnotation](https://sdk.apryse.com/api/web/Core.Annotations.StampAnnotation.html) [setImageData](https://sdk.apryse.com/api/web/Core.Annotations.StampAnnotation.html#setImageData) [AnnotationManager.addAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#addAnnotation) [AnnotationManager.redrawAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#redrawAnnotation) {% endtab %} {% tab title="JavaScript (SDK v6.0+)" %} {% code lineNumbers="true" %} ```js WebViewer(...) .then(instance => { const { docViewer, annotManager, Annotations } = instance; docViewer.on('annotationsLoaded', async () => { const res = await fetch('https://myserver/files/myImage.png'); // Include custom headers as necessary const imageBlob = await res.blob(); const reader = new FileReader(); reader.onloadend = async () => { const annot = new Annotations.StampAnnotation({ PageNumber: 1, X: 100, Y: 50, Width: 25, Height: 25, }); const base64data = reader.result; await annot.setImageData(base64data); // Base64 URL or SVG annotManager.addAnnotation(annot); annotManager.redrawAnnotation(annot); } reader.readAsDataURL(imageBlob); }); }); ``` {% endcode %} [DocumentViewer#annotationsLoaded](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:annotationsLoaded) [StampAnnotation](https://sdk.apryse.com/api/web/Core.Annotations.StampAnnotation.html) [setImageData](https://sdk.apryse.com/api/web/Core.Annotations.StampAnnotation.html#setImageData) [AnnotationManager.addAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#addAnnotation) [AnnotationManager.redrawAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#redrawAnnotation) {% endtab %} {% endtabs %} ## XFDF Element name: `stamp` {% tabs %} {% tab title="Shell" %} {% code lineNumbers="true" %} ```sh ... ``` {% endcode %} {% endtab %} {% endtabs %} ## Required properties ### PageNumber Gets or sets the page number of a document that the annotation appears on. ### X Gets or sets the annotation's x-axis position. ### Y Gets or sets the annotation's y-axis position. ### Height Gets or sets the height of the annotation. ### Width Gets or sets the width of the annotation. ## Notable properties For the full list of properties, please visit the annotation's [API docs](https://sdk.apryse.com/api/web/Core.Annotations.StampAnnotation.html). ### \[static] IconNames An enum with possible rubber stamp names. See the [`Icon`](https://sdk.apryse.com/api/web/Core.Annotations.StampAnnotation.html#.Icon) property to change what is shown on the stamp. Values: * APPROVED * AS\_IS * COMPLETED * CONFIDENTIAL * DEPARTMENTAL * DRAFT * EXPERIMENTAL * EXPIRED * FINAL * FOR\_COMMENT * FOR\_PUBLIC\_RELEASE * INFORMATION\_ONLY * NOT\_APPROVED * NOT\_FOR\_PUBLIC\_RELEASE * PRELIMINARY\_RESULTS * SB\_REJECTED * SH\_ACCEPTED * SH\_INITIAL\_HERE * SH\_SIGN\_HERE * SH\_WITNESS * SOLD * TOP\_SECRET * VOID ### Icon Gets or sets the type of the stamp. The icon is used when there is no image data for the stamp. The PDF specification defines a standard set. ### Author The author of the annotation. ### Color Gets or sets the annotation's stroke color. ### Hidden Gets or sets whether the annotation is hidden. ### Invisible Gets or sets whether the annotation is invisible, only if it is an unknown annotation type. Generally for hiding annotations you should use "Hidden". ### IsClickableOutsideRect Gets or sets whether any parts of the annotation drawn outside of the rect are clickable. ### Listable Gets or sets whether the annotation should be listed in annotation lists. If set to false, the annotation will also become unselectable. ### Locked Gets or sets whether the annotation is locked or not. If it's locked it can't be edited or deleted, but the note can be edited. ### LockedContents Gets or sets whether the annotation contents are locked or not. If the contents are locked then note can't be edited but the annotation can be edited or deleted. ### NoDelete Gets or sets if this annotation can be deleted. ### NoMove Gets or sets whether or not the annotation can be moved. ### NoResize Gets or sets if this annotation can be resized by the user. ### NoRotate Gets or sets if this annotation can be rotated. ### NoView Gets or sets whether the annotation is visible on the screen. Differs from Hidden in that it can still be printed if the print flag is set. ### NoZoom Gets or sets if this annotation scales with the page. ### Opacity Gets or sets the opacity of the annotation. ### Printable Gets or sets whether the annotation should be displayed when printing the page. ### ReadOnly Gets or sets whether the annotation is readonly or not. If it's readonly both the annotation itself and its note can't be edited or deleted. ### ToggleNoView Gets or sets whether the ToggleNoView flag is set on the annotation. ## Useful methods ### getImageData The primary feature for a stamp annotation is its image. Stamp annotations provides the [`getImageData`](https://sdk.apryse.com/api/web/Core.Annotations.StampAnnotation.html#getImageData) API to get the base64 data URL representing the image asynchronously. {% tabs %} {% tab title="JavaScript (SDK v8.0+)" %} {% code lineNumbers="true" %} ```js WebViewer(...) .then(instance => { const { annotationManager, Annotations } = instance.Core; annotationManager.addEventListener('annotationChanged', (annotations, action) => { if (action === 'delete') { annotations.forEach(async annot => { if (annot instanceof Annotations.StampAnnotation) { const imageData = await annot.getImageData(); const image = new Image(); image.width = annot.Width; image.height = annot.Height; image.onload = function() { // Use image }; image.src = imageData; } }); } }); }); ``` {% endcode %} [getImageData](https://sdk.apryse.com/api/web/Core.Annotations.StampAnnotation.html#getImageData) {% endtab %} {% tab title="JavaScript (SDK v6.0+)" %} {% code lineNumbers="true" %} ```js WebViewer(...) .then(instance => { const { annotManager, Annotations } = instance.Core; annotManager.on('annotationChanged', (annotations, action) => { if (action === 'delete') { annotations.forEach(annot => { if (annot instanceof Annotations.StampAnnotation) { const imageData = await annot.getImageData(); const image = new Image(); image.width = annot.Width; image.height = annot.Height; image.onload = function() { // Use image }; image.src = imageData; } }); } }); }); ``` {% endcode %} [getImageData](https://sdk.apryse.com/api/web/Core.Annotations.StampAnnotation.html#getImageData) {% endtab %} {% endtabs %} ### setImageData To set the image data for a stamp, you can provide a regular or data URL to [`setImageData`](https://sdk.apryse.com/api/web/Core.Annotations.StampAnnotation.html#setImageData). You should use this to initialize stamp annotations with the image of your choice. When the image data and stamp text are not set, the icon set on the `Icon` property will be rendered. ### getStampText If you have stamp text set, you can use [`getStampText`](https://sdk.apryse.com/api/web/Core.Annotations.StampAnnotation.html#getStampText) to retrieve it. ### setStampText WebViewer provides a way to create rubber stamps outside of the standard stamp icon set. You can use [`setStampText`](https://sdk.apryse.com/api/web/Core.Annotations.StampAnnotation.html#setStampText) to set the text you want on the stamp. {% tabs %} {% tab title="JavaScript (SDK v8.0+)" %} {% code lineNumbers="true" %} ```js WebViewer(...) .then(instance => { const { documentViewer, annotationManager, Annotations } = instance.Core; documentViewer.addEventListener('annotationsLoaded', () => { const annot = new Annotations.StampAnnotation({ PageNumber: 1, X: 100, Y: 50, Width: 25, Height: 25, }); annot.setStampText('Hello World'); annotationManager.addAnnotation(annot); annotationManager.redrawAnnotation(annot); }); }); ``` {% endcode %} [setStampText](https://sdk.apryse.com/api/web/Core.Annotations.StampAnnotation.html#setStampText) {% endtab %} {% tab title="JavaScript (SDK v6.0+)" %} {% code lineNumbers="true" %} ```js WebViewer(...) .then(instance => { const { docViewer, annotManager, Annotations } = instance; docViewer.on('annotationsLoaded', () => { const annot = new Annotations.StampAnnotation(); annot.PageNumber = 1; annot.X = 100; annot.Y = 50; annot.Width = 150; annot.Height = 25; annot.setStampText('Hello World'); annotManager.addAnnotation(annot); annotManager.redrawAnnotation(annot); }); }); ``` {% endcode %} [setStampText](https://sdk.apryse.com/api/web/Core.Annotations.StampAnnotation.html#setStampText) {% endtab %} {% endtabs %} ## Alternative use cases Stamp annotations are the best annotations to render custom content as the image data can be preserved. You can use the stamp annotation as a base class for custom annotations where its visual appearance is the primary feature. This will allow the custom annotation to render correctly outside of WebViewer when the document is saved. However, it will be saved as a stamp and read as a stamp. It will not be able to retain it's original custom annotation class/type as the custom annotation does not exist in the PDF specification and will be discarded/ignored. As such, WebViewer's `CustomAnnotation` leverages the stamp annotation and custom data to preserve it's custom appearance and type in other viewers. This allows it to be saved and viewed in other viewers. When deserialized back in WebViewer, it can be deserialized into it's original custom annotation class type. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.apryse.com/web/annotation/annotation-types/stampannotation.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.