I am currently using pdf-lib version 1.17.1 in a ReactJS application to generate some documents. Currently I have it writing text into the page, as well as embedding an image and having it show. However, I need to crop the image into a circle and it's proving difficult with various methods not working from the library like other solutions have suggested: https://github.com/Hopding/pdf-lib/issues/160#issuecomment-523205152 fit image in ellipse in pdflib
The code I am currently running looks like this:
// Define the ellipse parameters
const ellipseX = 338 + (414 / 2); // X-coordinate of the ellipse center
const ellipseY = (currentY + 95) - (414 / 2); // Y-coordinate of the ellipse center
const ellipseWidth = 200; // Width of the ellipse
const ellipseHeight = 200; // Height of the ellipse
//
agentBioPage.pushOperators(
pushGraphicsState(),
...drawEllipse({
x: ellipseX,
y: ellipseY,
xScale: ellipseWidth,
yScale: ellipseHeight,
rotate: degrees(0),
borderColor: rgb(0, 0, 0), // Border color (black)
borderWidth: 1, // Border width (1 point)
opacity: 1, // Opacity (fully opaque)
blendMode: 'Normal' // Blend mode (normal)
}),
clip(),
)
// Draw the image onto the page
agentBioPage.drawImage(embeddedProfilePicture, {
x: ellipseX - ellipseWidth,
y: ellipseY - ellipseHeight,
width: ellipseWidth * 2,
height: ellipseHeight * 2,
})
//
agentBioPage.pushOperators(popGraphicsState())
It's drawing on the circle, drawing on the image, but just not clipping the image at all (the ellipse is sat behind the image here):
Any advice, tips and tricks would be greatly appreciated!
Cheers