Function captureWebGLToImage

components/download-card-button.tsx:16–53

(canvas: HTMLCanvasElement)

};

function captureWebGLToImage(canvas: HTMLCanvasElement): string | null {
  const gl = canvas.getContext("webgl2") || canvas.getContext("webgl");
  if (!gl) {
    try {
      return canvas.toDataURL("image/png");
    } catch {
      return null;
    }
  }

  const width = canvas.width;
  const height = canvas.height;

  const pixels = new Uint8Array(width * height * 4);
  gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

  const tempCanvas = document.createElement("canvas");
  tempCanvas.width = width;
  tempCanvas.height = height;
  const ctx = tempCanvas.getContext("2d");
  if (!ctx) return null;

  const imageData = ctx.createImageData(width, height);

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const srcIdx = (y * width + x) * 4;
      const dstIdx = ((height - y - 1) * width + x) * 4;
      imageData.data[dstIdx] = pixels[srcIdx];
      imageData.data[dstIdx + 1] = pixels[srcIdx + 1];
      imageData.data[dstIdx + 2] = pixels[srcIdx + 2];
      imageData.data[dstIdx + 3] = pixels[srcIdx + 3];
    }
  }

  ctx.putImageData(imageData, 0, 0);
  return tempCanvas.toDataURL("image/png");
}

function captureWebGLCanvases(
  container: HTMLElement