How to remove background from an image ?

[rabeeaali]

Hi,

I have a signature image added to a pdf but the image is png without background but when I put it on pdf I got a background with the image

code:

import express from "express";
import { PDFDocument, rgb } from "pdf-lib"; // Import rgb here
import fontkit from "@pdf-lib/fontkit";
import fetch from "node-fetch";
import OSS from "ali-oss";

const app = express();
const port = 9090;
app.use(express.json());

app.get("/", (req, res) => {
  res.send("🙂");
});

app.post("/generate-pdf", async (req, res) => {
  try {
    const pdfBytes = await generatePdf(req.body.url, req.body.data);

    // do the reset 
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(port, () => {
  console.log(`Server is listening on http://localhost:${port}`);
});

async function generatePdf(url, pdfData) {
  const existingPdfBytes = await fetch(url).then((res) => res.arrayBuffer());
  const pdfDoc = await PDFDocument.load(existingPdfBytes);

  pdfDoc.registerFontkit(fontkit);
  const ubuntuFontBytes = await fetch(
    "https://alfont.com//wp-content/fonts/thulth-arabic-fonts//alfont_com_Parastoo-.ttf"
  ).then((res) => res.arrayBuffer());
  const ubuntuFont = await pdfDoc.embedFont(ubuntuFontBytes);
  const pages = pdfDoc.getPages();

  for (const item of pdfData) {
    const page = pages[item.page - 1];
    const size = page.getSize();

    const x = parseFloat(item.x) || 0;
    const y = parseFloat(item.y) || 0;
    const width = parseFloat(item.width) || 0;
    const height = parseFloat(item.height) || 0;

    if (item.label === "text") {
      const textWidth = ubuntuFont.widthOfTextAtSize(item.value, 8) + 5;
      const xPos = textWidth > width ? x : x + width - textWidth;
      const yPos =
        textWidth > width
          ? size.height - y - 8
          : size.height - y - height * 0.6;

      page.drawText(item.value, {
        x: xPos,
        y: yPos,
        size: 10,
        lineHeight: 8,
        font: ubuntuFont,
        color: rgb(0, 0, 0),
      });
    } else if (item.label === "file") {
      // Fetch and embed the PNG image correctly
      const imageBytesSignature = await fetch(item.value).then((res) =>
        res.arrayBuffer()
      );

      // Check the image type and embed accordingly
      let imageSignature = await pdfDoc.embedPng(imageBytesSignature); // Embed as PNG

      let jpgDimsSignature = imageSignature.scale(1);
      let ratio = Math.min(
        width / jpgDimsSignature.width,
        height / jpgDimsSignature.height
      );
      jpgDimsSignature = imageSignature.scale(ratio);

      const xPos =
        jpgDimsSignature.width > width * 0.6
          ? x
          : x + width * 0.6 - jpgDimsSignature.width;
      const yPos = size.height - y - height;

      // Ensure no NaN values
      if (
        !isNaN(xPos) &&
        !isNaN(yPos) &&
        !isNaN(jpgDimsSignature.width) &&
        !isNaN(jpgDimsSignature.height)
      ) {
        page.drawImage(imageSignature, {
          x: xPos,
          y: yPos,
          width: jpgDimsSignature.width,
          height: jpgDimsSignature.height,
          opacity: 1, // Ensure full opacity
        });
      } else {
        console.error("Invalid dimensions detected:", {
          xPos,
          yPos,
          jpgDimsSignature,
        });
      }
    }
  }

  return pdfDoc.save();
}