Not able to print pictures with CSS filters using jsPDF and html2canvas

Question

I have a few images, I am arranging them in a grid and trying to print, which works fine. Now, I added a tailwind CSS class 'grayscale' to the div and even the image and tried to print again, but it still prints the colored images in pdf. Here's my code..

const ImagePreviewModal = ({ selectedImages }) => {
  const [items, setItems] = useState(selectedImages);
  return (
<div id="image-grid">
    {items.map((image, index) => (
      <div className="w-full h-auto ">
        <div className='grid grid-cols-2 gap-3 my-1 px-7 py-4 rounded-md '>
          <img
            src={image.imageSrc}
            alt={`Selected ${index + 1}`}
            className="w-full h-auto rounded-sm border border-white"
          />
          <img
            src={image.imageSrc}
            alt={`Selected ${index + 2}`}
            className="w-full h-auto rounded-sm border border-white"
          />
        </div>
      </div>
    ))}
  </div>
)
};

And my print function looks like

const handlePrint = async () => {
    const grid = document.getElementById('image-grid');
    const canvas = await html2canvas(grid);
    const imgData = canvas.toDataURL('image/png');

    const pdf = new jsPDF({
      orientation: 'portrait',
      unit: 'pt',
      format: 'a4'
    });

    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = pdf.internal.pageSize.getHeight();

    const imgWidth = pdfWidth; // Use full page width
    const imgHeight = (canvas.height * imgWidth) / canvas.width; // Maintain aspect ratio

    // Calculate the new height for the images
    const spaceForText = imgHeight; // Space needed for text equals the height of the image
    const adjustedImgHeight = imgHeight - spaceForText; // Reduce the height of the images

    const x = 0; // Align to left edge
    const y = (pdfHeight - adjustedImgHeight) / 2; // Center vertically

    // Add the image to the PDF
    pdf.addImage(imgData, 'PNG', 20, 20, 555, 555);

    // Add text below the images
    const text = "Your Text Here"; // Change this to your desired text
    const textHeight = 12; // Set an approximate height for the text in points
    const textY = (pdfHeight + adjustedImgHeight) / 2 + 20; // Position 20 points below the images

    const textWidth = pdf.getTextWidth(text); // Get the width of the text
    const centerX = (pdfWidth - textWidth) / 2;
    pdf.setFont("Helvetica", "normal");
    pdf.setFontSize(25); // Set font size
    pdf.text(text, centerX - 10, 650); // Add text (x, y coordinates)

    // Print the PDF
    pdf.autoPrint();
    window.open(pdf.output('bloburl'));
  };

I added various css classes. but it didn't effect. What am I doing wrong here? Thanks in advance

Answer 1

jsPDF is a core conversion of PDF compatible structures into PDF syntax.

This means that for images, either JPG is imbedded as lossy RGB (no alpha) with varying quality. Or, a supplied image such as a PNG canvas in RGB with or without alpha will be converted into PDF 24bit lossless pixels.

At no time whatsoever does jsPDF use CSS, as that is part of the HTML system.

To alter image colours / appearances / scales they must be adapted as HTML canvas then the dataURL can be passed with any such imbedded changes to jsPDF.