Function exportToPng

yaml-flow-editor/src/utils/image.ts:80–101

* Export as high-resolution PNG * pixelRatio controls pixel density - higher values produce clearer images * Output image pixels = width * pixelRatio × height * pixelRatio

(
  element: HTMLElement,
  width: number,
  height: number,
  viewport: { x: number; y: number; zoom: number },
  options: Required<ExportOptions>
)

 * Output image pixels = width * pixelRatio × height * pixelRatio
 */
async function exportToPng(
  element: HTMLElement,
  width: number,
  height: number,
  viewport: { x: number; y: number; zoom: number },
  options: Required<ExportOptions>
): Promise<string> {
  return toPng(element, {
    backgroundColor: options.backgroundColor,
    width: width,
    height: height,
    pixelRatio: options.scale, // Use pixelRatio for higher pixel density
    style: {
      width: `${width}px`,
      height: `${height}px`,
      transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`,
      border: 'none',
      outline: 'none',
    },
    filter: createNodeFilter(),
  });
}

/**
 * Export as SVG (vector graphics, infinitely scalable)