0

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):

enter image description here

Any advice, tips and tricks would be greatly appreciated!

Cheers

stm
  • 662
  • 1
  • 6
  • 23
lewisnewson
  • 410
  • 6
  • 22

0 Answers0