Makes screenshot of html page with scroll using html2canvas

make_screenshot.js

(async () => {
  const SCROLL_SELECTOR = "body"; // <-- поменяй на нужный контейнер, например ".main-scroll"
  const scrollEl = SCROLL_SELECTOR === "body"
    ? document.documentElement
    : document.querySelector(SCROLL_SELECTOR);

  if (!scrollEl) {
    throw new Error("Scroll element not found: " + SCROLL_SELECTOR);
  }

  if (!window.html2canvas) {
    await new Promise((resolve, reject) => {
      const s = document.createElement("script");
      s.src = "https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js";
      s.onload = resolve;
      s.onerror = reject;
      document.head.appendChild(s);
    });
  }

  // Временно убираем oklch, чтобы html2canvas не падал
  const override = document.createElement("style");
  override.id = "__html2canvas_safe_colors__";
  override.textContent = `
    * {
      color: rgb(0,0,0) !important;
      background-color: transparent !important;
      border-color: transparent !important;
      outline-color: transparent !important;
      box-shadow: none !important;
      text-shadow: none !important;
      caret-color: rgb(0,0,0) !important;
      -webkit-text-fill-color: rgb(0,0,0) !important;
    }
  `;
  document.head.appendChild(override);

  const totalHeight = scrollEl.scrollHeight;
  const viewportHeight = scrollEl.clientHeight;
  const totalWidth = scrollEl.scrollWidth;
  const viewportWidth = scrollEl.clientWidth;

  const shots = [];
  const originalScrollTop = scrollEl.scrollTop;

  for (let y = 0; y < totalHeight; y += viewportHeight) {
    scrollEl.scrollTop = y;
    await new Promise(r => setTimeout(r, 120)); // дать странице перерисоваться

    const canvas = await html2canvas(scrollEl, {
      useCORS: true,
      allowTaint: true,
      scale: window.devicePixelRatio || 1,
      width: viewportWidth,
      height: viewportHeight,
    });

    shots.push({ canvas, y });
  }

  // Собираем общий холст
  const finalCanvas = document.createElement("canvas");
  const scale = window.devicePixelRatio || 1;
  finalCanvas.width = totalWidth * scale;
  finalCanvas.height = totalHeight * scale;
  const ctx = finalCanvas.getContext("2d");

  for (const shot of shots) {
    ctx.drawImage(shot.canvas, 0, shot.y * scale);
  }

  scrollEl.scrollTop = originalScrollTop;
  override.remove();

  const link = document.createElement("a");
  link.download = `screenshot-full-${Date.now()}.png`;
  link.href = finalCanvas.toDataURL("image/png");
  link.click();
})();