The issue is that image is lost and not serialized on save. To avoid that, make sure you convert the image to a dataURL.
annotation.ImageData = document.getElementById("myCanvas").toDataURL();
Hello, I’m Ron, an automated tech support bot 
While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:
Guides:- Creating custom annotations for your viewer - Stamp image settings (optional)
- Angular project WebViewer integration issues
- JavaScript Video Annotation Library
- How to save and load a custom property on an annotation?
Hi @Andrey ,
One question, where should i do that? because i add the stamp or annotation but still having this problem.
I have my onSave ( to save it in the database ) like this :
const saveDocument = async () => {
setIsLoadingDocument(true);
let name = '';
let annotationsAdded = [];
let file = null;
let pages = 0;
if (mediaFile) {
const fileType = `${mediaFile.name.split('.').pop()}`;
name = `${eventId}.${fileType}`;
file = await fileToBlob(mediaFile);
} else {
const doc = instanceDocumentViewer.getDocument();
pages = doc.getPageCount();
const { annotationManager } = webViewer.Core;
const xfdfString = await annotationManager.exportAnnotations();
annotationsAdded = await annotationManager.getAnnotationsList();
const data = await doc.getFileData({
// saves the document with annotations in it //
xfdfString
});
const arr = new Uint8Array(data);
file = new Blob([arr], { type: 'application/pdf' });
name = `${eventId}.pdf`;
}
const clerkId = getValueFromToken('clerk');
const path = `/${clerkId}/${caseId}/${eventId}${
annotationsAdded.length > 0 ? '/redacted' : ''
}/${name}`;
const FormData = require('form-data');
let formData = new FormData();
formData.append('file', file);
formData.append('path', path);
formData.append('eventId', eventId);
formData.append('pages', pages);
const contentType = file.type;
postDocument({ body: formData, url: postUrl, contentType: contentType })
.then((response) => {
if (response.status >= 400) {
showAlertErrorSaveDocument();
} else {
setIsSaveDocument(true);
!mediaFile && getDocumentSaved();
if (mediaFile) {
setMediaFile(null);
showAlertSuccessUpload({ name });
} else {
setToast({
text: `${name} has been successfully uploaded.`,
show: true,
type: TOAST_TYPES.SUCCESS
});
}
}
setIsLoadingDocument(false);
})
.catch((err) => {
console.log(err);
setIsLoadingDocument(false);
showAlertErrorSaveDocument();
});
};
What i am doing wrong?
Hello @alan.vera,
You would do so during programmatically adding annotations: PDFTron Systems Inc. | Documentation.
Let me know if that works.
Hi @Andrey ,
I’m doing like this, because i add the image from a modal, from outside the pdftron.
useEffect(() => {
if (imageSelection) {
const { Annotations, annotationManager } = webViewer.Core;
const stampAnnot = new Annotations.StampAnnotation();
stampAnnot.PageNumber = 1;
stampAnnot.X = 100;
stampAnnot.Y = 250;
stampAnnot.Width = 275;
stampAnnot.Height = 300;
const keepAsSVG = true;
stampAnnot.setImageData(imageSelection, keepAsSVG);
stampAnnot.Author = annotationManager.getCurrentUser();
// stampAnnot.ImageData = document.getElementById("myCanvas").toDataURL();
annotationManager.addAnnotation(stampAnnot);
annotationManager.redrawAnnotation(stampAnnot);
}
}, [imageSelection]);
What is image selection?
stampAnnot.setImageData(imageSelection, keepAsSVG);
And you should uncomment that line?
stampAnnot.ImageData = document.getElementById("myCanvas").toDataURL();
Could you provide a full sample code sample?
Sure:
this is an UseEffect which change when the user select an image, ( imageSelection is a useState);
useEffect(() => {
if (imageSelection) {
const { Annotations, annotationManager } = webViewer.Core;
const stampAnnot = new Annotations.StampAnnotation();
stampAnnot.PageNumber = 1;
stampAnnot.X = 100;
stampAnnot.Y = 250;
stampAnnot.Width = 275;
stampAnnot.Height = 300;
// const keepAsSVG = true;
console.log(imageSelection);
// stampAnnot.setImageData(imageSelection, keepAsSVG);
stampAnnot.ImageData = imageSelection;
stampAnnot.Author = annotationManager.getCurrentUser();
annotationManager.addAnnotation(stampAnnot);
annotationManager.redrawAnnotation(stampAnnot);
}
}, [imageSelection]);
@Andrey and then i have the saveDocument function :
const saveDocument = async () => {
setIsLoadingDocument(true);
let name = '';
let annotationsAdded = [];
let file = null;
let pages = 0;
if (mediaFile) {
const fileType = `${mediaFile.name.split('.').pop()}`;
name = `${eventId}.${fileType}`;
file = await fileToBlob(mediaFile);
} else {
const doc = instanceDocumentViewer.getDocument();
pages = doc.getPageCount();
const { annotationManager } = webViewer.Core;
const xfdfString = await annotationManager.exportAnnotations();
annotationsAdded = await annotationManager.getAnnotationsList();
const data = await doc.getFileData({
// saves the document with annotations in it
xfdfString
});
const arr = new Uint8Array(data);
file = new Blob([arr], { type: 'application/pdf' });
name = `${eventId}.pdf`;
}
/**
* Path without annotations = /clerk/${caseId}/${eventId}/${eventId}.pdf
* Path with annotations = /clerk/${caseId}/${eventId}/redacted/${eventId}.filetype
*/
const clerkId = getValueFromToken('clerk');
const path = `/${clerkId}/${caseId}/${eventId}${
annotationsAdded.length > 0 ? '/redacted' : ''
}/${name}`;
const FormData = require('form-data');
let formData = new FormData();
formData.append('file', file);
formData.append('path', path);
formData.append('eventId', eventId);
formData.append('pages', pages);
const contentType = file.type;
postDocument({ body: formData, url: postUrl, contentType: contentType })
.then((response) => {
if (response.status >= 400) {
showAlertErrorSaveDocument();
} else {
setIsSaveDocument(true);
!mediaFile && getDocumentSaved();
if (mediaFile) {
setMediaFile(null);
showAlertSuccessUpload({ name });
} else {
setToast({
text: `${name} has been successfully uploaded.`,
show: true,
type: TOAST_TYPES.SUCCESS
});
}
}
setIsLoadingDocument(false);
})
.catch((err) => {
console.log(err);
setIsLoadingDocument(false);
showAlertErrorSaveDocument();
});
};
Hello,
Thank you for the sample code, I don’t see any obvious problem in the simple code you sent, do you see anything in your browser console log when this fails?
Besides that, you mention that you are saving the document and sending it to a database. Do you know where in your process does the issue is take place (adding annotation, saving document, retrieving annotations from the)? Does the stamp appear after you do the addAnnotation and redrawAnnotation, and when in your process does it stop working? Thank you
Best Regards,
Andrew Yip
Software Developer
PDFTron Systems, Inc.
www.pdftron.com
Hi @Andrew_Yip , yes it appear when i do the addannotation but when i save the document with the stamp or annotation, it appears with the background pink and it says DRAFT, and the image is not appears