将 Base64 转换为普通 PNG 以进行复制/粘贴

Question

我有一个 HTML 电子邮件模板，它使用了如下的混乱流程：

1. 从 MySQL 中提取数据并放入 HighCharts 图表中
2. 使用 canvg 将 HighCharts SVG 转换为画布
3. 使用 canvas.toDataURL 将画布渲染为 Base64 PNG

一切都很好，图像显示得很好（除了 Internet Explorer 中的一些古怪之处），但问题是：

我希望用户能够将整个网页复制并粘贴到 Outlook 中，然后以电子邮件的形式发送出去。但是，Outlook（以及我尝试过的其他一些客户端）不会通过复制粘贴接收 Base64 PNG - 图像应该存在的地方有一个空白区域。

有谁知道将 Base64 转换为普通 PNG 以使其在复制/粘贴中仍然存在的方法？也许这需要将 PNG 保存到服务器？

Answer 1

自从你上一个问题以来，我一直在考虑这个问题，我想出了 3 个选项：

一个

1. 坚持你所拥有的。
2. 从 toDataURL 中获取 base64 字符串，通过 AJAX 将其提交回服务器，在后端将其转换为 PNG，将其存储在服务器上并将 PNG 发送回页面。

两个

1. 在用户浏览器上渲染 highcharts SVG。
2. 通过 AJAX 调用将该 SVG 字符串提交到您的后端服务器。

3. 在后端，向位于 http://export.highcharts.com/ 的 highcharts 导出服务器生成一个发布请求 (something like described here see Using PHP for POST Request)。通过查看 highcharts source，请求需要包含以下发布的变量：

   文件名：png文件名
   类型：来自plotOptions，类型、线条、条形等。
   宽度：所需 png
   的宽度（以像素为单位） svg：svg字符串

4. 获取生成的 PNG，将其保存到您的服务器，正常提供。

三个

改用Java Highcharts API。你必须让它在你的服务器上运行。但是，一旦您这样做了，您就可以完全在后端生成图表并提供 PNG 文件。