如何复制/粘贴 base64 图像？答案

【问题标题】：How can I copy/paste base64 images?如何复制/粘贴 base64 图像？
【发布时间】：2017-08-11 19:34:46
【问题描述】：

所以我正在使用生成 SVG 图表的 Highcharts.js。我将其转换为 PNG，然后在我的页面上显示为 img。但是由于某种原因，当我尝试复制新图像时，粘贴是空的。

$("#export").click(function() {
var svg = $("#chart").find('svg')[0];
var svgSize = svg.getBoundingClientRect();
var svgData = new XMLSerializer().serializeToString( svg );

var img = document.createElement('img');
document.querySelector('#image').src  = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)))

});

我可以在新选项卡中打开图像，但那里没有右键单击复制选项。我可以保存图像。但不知为何，我无法获得副本？

编辑：我实际上并没有使用画布。那是为了别的。我对它做了更多的研究，我看到了几年前关于二进制数据图像/base64 图像如何无法复制粘贴的 stackoverflow。有解决办法吗？

这是一个示例 JSFiddle。 https://jsfiddle.net/lauralindy/8x9ob2v3/

【问题讨论】：

那是因为你将它渲染到画布上。一旦绘制到画布上，它就会成为画布的一部分，因为它是在立即模式下绘制的——一旦绘制就删除对 img 的引用。
是否可以创建一个最小的 jsfiddle 或类似的？
SVG 是基于 XML 的图像格式，这意味着它是代码。如果要复制 SVG，可以检查元素并复制整个 svg 标签。否则，您需要将其转换为不同的格式，例如（jpg、gif、png）然后复制。

标签： javascript html svg highcharts

【解决方案1】：

您可以复制从base64 字符串创建的图像。看看下面发布的示例。单击“从base64 字符串添加图像”将图像附加到正文标签，右键单击图像，复制图形，打开一些图形编辑器并将图像粘贴到那里。

示例：
http://jsfiddle.net/8j8p2uyk/

【讨论】：