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

this might be a stretch but this worked for my own code const canvas = await html2canvas(grid, {scrollY: 0}); — oelimoe
– oelimoe, Commented Oct 18, 2024 at 11:45
please react when thinks work or dont so the issue can be fixed or closed with an valid answer and so that your issue can be resolved faster — oelimoe
– oelimoe, Commented Oct 28, 2024 at 9:25
It didn't work like that for me. I fixed it by applying the filter before clicking it. @oelimoe — Anshu Patel
– Anshu Patel, Commented Nov 26, 2024 at 11:33

K J · Accepted Answer · 2025-01-03 02:28:29Z

0

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.

answered Jan 3 at 2:28

K J

12.6k6 gold badges27 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related