Before, I attempted to utilize an Annotation.StampAnnotation to make a personalized annotation while using an SVG as the foundation image. Unfortunately, I discovered that the StampAnnotation does not allow the user to alter or set the color. Thus, I have now switched to using an Annotation.MarkupAnnotation.
Presently, I am facing difficulties in drawing the inline SVG (string) on the CanvasRenderingContext2D using drawImage(). I came across some code on TutorialsPoint, and after testing it in a JavaScript sandbox, it seemed to work perfectly. However, when I integrated it with PDFTron, only an empty box was displayed on the PDF.
Below is the code snippet:
createCustomAnnotation: function (Annotations, annotManager, subject, inlineSVGString) {
const CustomAnnotation = function () {
Annotations.MarkupAnnotation.call(this);
this.Subject = subject;
}
CustomAnnotation.prototype = new Annotations.MarkupAnnotation();
CustomAnnotation.prototype.draw = function (ctx, pageMatrix) {
this.setStyles(ctx, pageMatrix);
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svg = new Blob([inlineSVGString], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);
var x = this.X;
var y = this.Y;
img.onload = function() {
ctx.drawImage(img, x, y, 30, 30);
DOMURL.revokeObjectURL(url);
}
img.src = url;
}
return CustomAnnotation;
}
I would greatly appreciate any assistance!
Many thanks!