将 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. 在后端，生成发布请求 (类似此处描述的内容请参阅使用 PHP 进行 POST 请求）到位于 http://export.highcharts.com/。通过查看 highcharts 源，请求需要包含以下发布的变量：

   <块引用>

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

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

三

切换到使用 Java Highcharts API 。你必须让它在你的服务器上运行。不过，一旦完成，您就可以完全在后端生成图表并只提供 PNG 文件。