Thank you for your reply,
I was able to get the image and the custom draw function rendered together by setting the image outside of the draw function and separately with setImageData.
Please see revised snippet:
Same draw function but take out the ![]()
element creation:
const CustomStampAnnotation = Annotations.CustomAnnotation.createFromClass('CustomStamp', Annotations.StampAnnotation);
const origDraw = CustomStampAnnotation.prototype.draw;
CustomStampAnnotation.prototype.draw = function (ctx, pageMatrix) {
// draw(ctx, pageMatrix) {
origDraw.apply(this, arguments);
// the setStyles function is a function on markup annotations that sets up
// certain properties for us on the canvas for the annotation's stroke thickness.
this.setStyles(ctx, pageMatrix);
ctx.translate(this.X, this.Y);
// shadow color
ctx.shadowColor = 'rgba(0, 0, 0, 0.25)';
//outer circle
ctx.beginPath();
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 1;
ctx.shadowBlur = 4;
ctx.arc(20, 0, 20, 0, 2 * Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 0;
ctx.closePath();
// triangle
ctx.beginPath();
ctx.lineTo(0, 20);
ctx.lineTo(22, 20);
ctx.quadraticCurveTo(4, 14, 0, 0);
ctx.fillStyle = 'white';
ctx.fill();
ctx.closePath();
// primary color circle
ctx.beginPath();
ctx.arc(20, 0, 16, 0, 2 * Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = '#4093ff';
ctx.stroke();
ctx.closePath();
//img
// const thumbImg = document.createElement('img');
// thumbImg.crossOrigin = 'anonymous';
// thumbImg.onload = function () {
// ctx.save();
// ctx.beginPath();
// ctx.arc(0, 0, 16, 0, Math.PI * 2, true);
// ctx.closePath();
// ctx.clip();
// ctx.drawImage(thumbImg, 24, 2, 40, 44);
// ctx.beginPath();
// ctx.arc(0, 0, 16, 0, Math.PI * 2, true);
// ctx.clip();
// ctx.closePath();
// ctx.restore();
// };
// thumbImg.src =
// 'https://images.unsplash.com/photo-1742502570062-eb458e3e3a61?q=80&w=5346&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
}
Create the custom stamp annotation, wait for the image to load, and convert it to imageDataURL and then set the stamp’s image via setImageData:
documentViewer.addEventListener('documentLoaded', async () => {
const annot = new CustomStampAnnotation({
PageNumber: 1,
X: 50,
Y: 50,
Width: 100,
Height: 25,
});
const thumbImg = document.createElement('img');
thumbImg.crossOrigin = 'anonymous';
thumbImg.src = 'https://images.unsplash.com/photo-1742502570062-eb458e3e3a61?q=80&w=5346&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
thumbImg.onload = function () {
const canvas = document.createElement('canvas');
canvas.width = thumbImg.naturalWidth;
canvas.height = thumbImg.naturalHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(thumbImg, 0, 0);
const dataURL = canvas.toDataURL('image/png')
annot.setImageData(dataURL);
}
instance.Core.annotationManager.addAnnotation(annot);
instance.Core.annotationManager.redrawAnnotation(annot);
});
This is the final result:
best regards,
Kevin
