script.js

const outputImage = document.getElementById("outputImage");
const downloadBtn = document.getElementById("downloadBtn");
const bgButton = document.getElementById("bgButton");
const imageInput = document.getElementById("imageInput");
const uploadBtn = document.getElementById("uploadBtn");
const imageDetails = document.getElementById("imageDetails");
const loadingSpinner = document.getElementById("loadingSpinner");
const previewImage = document.getElementById("previewImage");

let removedBgImageUrl = ""; // To store the image with removed background
let newBackgroundUrl = ""; // To store the new background image URL

// Function to simulate background removal using remove.bg API
function simulateBackgroundRemoval(file) {
  loadingSpinner.style.display = "inline-block"; // Show loading spinner

  const formData = new FormData();
  formData.append("image_file", file);

  fetch("https://api.remove.bg/v1.0/removebg", {
    method: "POST",
    headers: {
      "X-Api-Key": "vKjpZwEgetFqYDPJXzp9q6Qt",
    },
    body: formData,
  })
    .then((response) => {
      if (!response.ok) {
        throw new Error("Failed to remove background: " + response.statusText);
      }
      return response.blob();
    })
    .then((blob) => {
      const url = URL.createObjectURL(blob);
      removedBgImageUrl = url; // Store the URL of the processed image
      outputImage.src = url;
      outputImage.style.display = "block";
      downloadBtn.style.display = "inline-block";
      bgButton.style.display = "inline-block";

      loadingSpinner.style.display = "none"; // Hide loading spinner
    })
    .catch((error) => {
      console.error("Error:", error);
      loadingSpinner.style.display = "none"; // Hide loading spinner in case of error
    });
}

// Handle the file upload for background removal
imageInput.addEventListener("change", function (event) {
  const file = event.target.files[0];
  if (file) {
    // Display image preview
    const reader = new FileReader();
    reader.onload = function (e) {
      previewImage.src = e.target.result;
      previewImage.style.display = "inline-block";
    };
    reader.readAsDataURL(file);

    // Display image details
    imageDetails.innerHTML = `
      <strong>File Name:</strong> ${file.name}<br>
      <strong>File Size:</strong> ${(file.size / 1024).toFixed(2)} KB<br>
    `;

    simulateBackgroundRemoval(file);
  }
});

// Handle the upload button click
uploadBtn.addEventListener("click", function () {
  imageInput.click();
});

// Handle the new background upload
bgButton.addEventListener("click", function () {
  const newBackgroundInput = document.createElement("input");
  newBackgroundInput.type = "file";
  newBackgroundInput.accept = "image/*";
  newBackgroundInput.click();

  newBackgroundInput.addEventListener("change", function (event) {
    const newBackgroundFile = event.target.files[0];
    if (newBackgroundFile) {
      const reader = new FileReader();
      reader.onload = function (e) {
        newBackgroundUrl = e.target.result; // Store the URL of the new background
        outputImage.style.backgroundImage = `url(${newBackgroundUrl})`;
        outputImage.style.backgroundSize = "cover"; // Ensure the background image covers the canvas
        outputImage.style.backgroundPosition = "center"; // Center the background image
        outputImage.style.backgroundRepeat = "no-repeat"; // Don't repeat the background image
        outputImage.style.overflow = "hidden"; // Crop the overflow
      };
      reader.readAsDataURL(newBackgroundFile);
    }
  });
});

downloadBtn.addEventListener("click", function () {
  if (removedBgImageUrl && newBackgroundUrl) {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

    const bgImage = new Image();
    const fgImage = new Image();

    // Load the background and foreground images
    bgImage.src = newBackgroundUrl;
    fgImage.src = removedBgImageUrl;

    bgImage.onload = function () {
      fgImage.onload = function () {
        // Set the canvas dimensions to match the foreground image (uploaded image)
        const canvasWidth = fgImage.width;
        const canvasHeight = fgImage.height;
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;

        // Draw the background image to cover the canvas (like background-size: cover;)
        // Cropping extra parts if overflow occurs
        const bgWidth = bgImage.width;
        const bgHeight = bgImage.height;

        const xOffset = (bgWidth - canvasWidth) / 2; // center horizontally
        const yOffset = (bgHeight - canvasHeight) / 2; // center vertically

        // Draw the background image
        ctx.drawImage(
          bgImage,
          xOffset,
          yOffset,
          canvasWidth,
          canvasHeight,
          0,
          0,
          canvasWidth,
          canvasHeight
        );

        // Draw the foreground image on top of the background
        ctx.drawImage(fgImage, 0, 0, canvasWidth, canvasHeight);

        // Generate the final image and download
        const mergedImage = canvas.toDataURL("image/png");
        const link = document.createElement("a");
        link.href = mergedImage;
        link.download = "image-with-new-bg.png";
        link.click();
      };
    };
  } else {
    const a = document.createElement("a");
    a.href = removedBgImageUrl;
    a.download = "image-with-new-bg.png";
    a.click();
    // alert("Please upload both the image and background!");
  }
});