So I got a project where the user can generate a pdf based on their input. Using the jspdf library to generate the PDF files. The thing is though, the user can upload a profile picture, and I would like to display that image with rounded corners or fully rounded (with a border-radius of 50%). Since there isn't a native function that allows this in jspdf or any other library as far as I know (pfdkit, pdfmake), I am looking for a way to modify the image before generating the pdf.
I already tried using html2canvas, and that worked fine actually. The problem with html2canvas occurs when a user is on their mobile. Since the width and height of the image are adjusted to the screen size (both of which are around 35px), taking a snapshot with html2canvas and then displaying that in a pdf with a width & height of 100px, the image obviously gets way to blurry.
So ideally, I need something to edit the original image or something before generating a PDF file with jspdf.
Any other ideas that bring me closer to a solution are also very much appreciated.
Just for clarification, simply adding a CSS property to the image won't help. jspdf just uses the image in the img tag, without any css properties.
If anyone for whatever reason stumbles across this post, I managed to actually achieve my desired result. As I said the user is able to upload an image and I would like to display that image with rounded corners or with a border-radius of 50%. Anyway, before previewing (and uploading) the image to my website, the user has to crop the image using cropperjs. They can then decide for themselves if they would like to display the image with rounded corners or with a border radius of 50%. I think that gives a tremendous boost to the UX and my end result.