高图表，导出/复制图像到剪贴板

Question

我需要将 highchart 作为图像复制到剪贴板，我该怎么做？

Ther 内置导出功能，但它显示窗口提示打开/下载，但我想右键单击图表（或使用右上角的“导出”按钮），然后选择“将图像复制到剪贴板”。

再次需要你的帮助，孩子们！

Answer 1

据我所知，我认为你做不到。至少不能跨浏览器，但我认为 IE 允许将内容复制到剪贴板。事实上，IE9 甚至允许右键单击 highChart 的图表，并提供“复制”选项，将其复制到剪贴板。 IE9 基本上允许在任何 SVG 对象上执行此操作。 Firefox 和 Chrome 不允许将内容复制到剪贴板，不能通过 JS，有各种 flash 选项，但我建议远离，除非你绝对必须

Answer 2

这应该适用于现代浏览器：

function copyToClipboard(chart) {
    const image = new Image();
    image.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = 800;
      canvas.height = 600;
      const context = canvas.getContext('2d');
      context.drawImage(image, 0, 0);
      canvas.toBlob((blob) => navigator.clipboard.write([ new ClipboardItem({ 'image/png': blob }) ]), 'image/png');
    };

    const svg = new Blob([ chart.getSVG() ], { type: 'image/svg+xml;charset=utf-8' });
    image.src = URL.createObjectURL(svg);
}