将页面上的所有 SVG 复制到剪贴板

Question

我想要一个单击按钮来复制页面上的所有 SVG。我在网站上找不到有关复制多个 SVG 的现有问题。

我在下面提供的解决方案有效，但始终可以改进。例如，采用详细参数列表来控制要抓取的 SVG、它们的大小以及要包含的其他信息。

Answer 1

下面的示例将获取所有 SVG，在这种情况下，它们都可以从 className highcharts-root 中选择。

然后它创建一个画布，遍历 SVG，将它们转换为 PNG 并将它们添加到画布。最后它会将该画布复制到剪贴板。

可以改进的部分是最后的强制超时，以确保所有图像都已加载到画布上。

此版本还将通过 X 网格将图像粘贴到网格 2 中，如下所示：

Image	Image
Image	Image
Image	Image
Image	Image

这可以根据需要进行调整。

export async function copyPNGs() {
    const svgElements = document.getElementsByClassName("highcharts-root");
    const gutterSpacing = 15;
    const width = 650;
    const height = 400;
    const background = "#eee";

    // Create a temporary canvas element to render the SVGs as PNGs
    const canvas = document.createElement("canvas");
    canvas.width = width * 2 + gutterSpacing * 3;
    canvas.height = (height + gutterSpacing) * Math.ceil(svgElements.length / 2) + gutterSpacing;
    const context = canvas.getContext("2d");

    // Fill the canvas with a light gray background color.
    if (context) {
        context.fillStyle = background;
        context.fillRect(0, 0, canvas.width, canvas.height);
    }

    // Render each SVG as a PNG and draw it on the canvas.
    for (let i = 0; i < svgElements.length; i++) {
        const row = Math.ceil((i + 1) / 2) - 1;
        const column = i % 2;
        const svg = svgElements[i];
        const svgData = new XMLSerializer().serializeToString(svg);
        const img = new Image();
        const isEven = column === 0;
        img.onload = function () {
            const dx = column * width + (!isEven ? gutterSpacing : 0) + gutterSpacing;
            const dy = row * height + (row !== 0 ? gutterSpacing * row : 0) + gutterSpacing;
            context?.drawImage(img, dx, dy, width, height);
        };
        // Convert the SVG to a data URL and set the src of the image element to it.
        img.src = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgData)));
    }

    // Wait for a second to make sure all images are loaded, then convert the canvas to a blob and copy it to the clipboard.
    setTimeout(() => {
        canvas.toBlob(async (blob) => {
            if (blob === null) {
                alert("Could not copy the charts");
            } else {
                await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
            }
        }, "image/png");
    }, 1000);
}