Product: pdftron
Product Version: 8.7.0
Please give a brief summary of your issue:
(Think of this as an email subject)
i am working in a project with laravel/vue, i export the signature created in the signature tool as base 64 images to a database using the examples provided in the official documentation, then i import the using the same code in the docs but when i do i have two problems, the image that is loaded is pale while in preview, and blurry when used, also you can no longer change the color to the signature just change the opacity, with new signatures everything works normal but for imported one it doesn’t, after some testing with a base64 to image decoder i found out that the exported images are blurry and since that is what i pass to the functions they look that way when imported i’ll post the code used here and some images for demostration
const viewerElement = document.getElementById('webviewer');
WebViewer({
path: '/js/WebViewer/lib',
initialDoc: this.initialDoc,
extension: 'pdf',
}, viewerElement)
.then((instance) => {
const { documentViewer, annotationManager } = instance.Core;
const signatureTool = documentViewer.getTool('AnnotationCreateSignature');
documentViewer.addEventListener('documentLoaded', () => {
instance.UI.setLanguage(that.locale);
let signatures = JSON.parse(that.savedSignatures);
signatures = signatures.map(a => a.base64_signature);
signatureTool.importSignatures(["data:image/png;base64, " + signatures[0]]); //base64 images array
document.getElementById('app').setAttribute('style', 'padding: 0');
document.getElementById('loader-container').classList.add('d-none');
document.getElementById('all-pages-content').removeAttribute('style')
document.getElementById('downloadButton').setAttribute('style', 'visibility: visible')
document.getElementById('pdf-ui').setAttribute('style', 'visibility: visible')
});
documentViewer.addEventListener('annotationsLoaded', async () => {
annotationManager.addEventListener('annotationDrawn', async (annotationList) => {
console.log('1')
annotationList.forEach(annotation => {
if (annotation.Subject === "Signature")
that.extractAnnotationSignature(annotation, documentViewer);
})
})
});
let saveSignedPdf = document.getElementById('downloadButton');
saveSignedPdf.addEventListener('click', async () => {
console.log('control')
const doc = documentViewer.getDocument();
const xfdfString = await annotationManager.exportAnnotations();
const data = await doc.getFileData({
// saves the document with annotations in it
xfdfString
});
const arr = new Uint8Array(data);
const blob = new Blob([arr], {type: 'application/pdf'});
await that.processDocument(blob)
// Add code for handling Blob here
})
// instance.disableElements(['downloadButton', 'printButton']);
// instance.disableElements(['toolbarGroup-Insert']);
return instance
});
},
methods:{
async processDocument(blob, tool='') {
let passwordFile = "";
let that = this;
Swal.fire({
title: this.messages.notifications.processing,
html: this.messages.notifications.saving_changes,
willOpen: async () => {
Swal.showLoading();
let formData = new FormData();
formData.append('files', blob);
formData.append('fileName', that.filename);
formData.append('passwordFile', passwordFile);
formData.append('website_id', that.websiteId);
formData.append('customer_id', that.customerId);
formData.append('locale', that.locale);
formData.append('pdf_service_id', that.pdfServiceId);
if (tool) formData.append('other_tool', tool);
const config = {
headers: {
'content-type': 'multipart/form-data',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
}
}
await axios.post(that.processDocumentUrl, formData, config)
.then(function (response) {
if (!response.data.success) {
return Swal.fire({
icon: "error",
title: that.messages.notifications.error,
text: that.messages.notifications.error_text,
});
}
let link = document.createElement('a')
link.href = window.URL.createObjectURL(blob);
link.download = that.filename;
link.click()
window.location.href = response.data.data.redirectionUrl;
})
.catch(function (error) {
that.output = error;
console.log("could not reach backend")
});
},
showConfirmButton: false,
allowOutsideClick: false
});
},
async extractAnnotationSignature(annotation, docViewer) {
let that = this;
// Create a new Canvas to draw the Annotation on
const canvas = document.createElement('canvas');
// Reference the annotation from the Document
const pageMatrix = docViewer.getDocument().getPageMatrix(annotation.PageNumber);
// Set the height & width of the canvas to match the annotation
canvas.height = annotation.Height;
canvas.width = annotation.Width;
const ctx = canvas.getContext('2d');
// Translate the Annotation to the top Top Left Corner of the Canvas ie (0, 0)
ctx.translate(-annotation.X, -annotation.Y);
// Draw the Annotation onto the Canvas
annotation.draw(ctx, pageMatrix);
// Convert the Canvas to a Blob Object for Upload
canvas.toBlob((blob) => {
let formData = new FormData();
formData.append('signature', blob);
formData.append('customer_id', that.customerId);
const config = {
headers: {
'content-type': 'multipart/form-data',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
}
}
axios.post(that.saveSignatureUrl, formData, config)
.then(function (response) {
if (!response.data.success) {
console.log("could not save signature for future use")
}
else {
console.log("saved signature for future use")
}
})
.catch(function (error) {
that.output = error;
console.log("could not reach backend")
});
});
}
}
in the web demos and other sites that uses pdftron like smallpdf this issue doesn’t happen so if you can help me it would be greatly appreciated
here is the base64 string for the blurry signature
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
Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
Please provide a link to a minimal sample where the issue is reproducible: