HTML：Base64 图像显示/复制高度错误答案

【问题标题】：HTML: Base64 image displaying/copying with wrong heightHTML：Base64 图像显示/复制高度错误
【发布时间】：2015-08-28 16:20:43
【问题描述】：

所以，基本上我有一个像这样的简单 base64 图像：http://jsfiddle.net/rm5c8o1t

我的问题是它只显示它的上半部分。如果我只是将其添加到 img 标签：

style="height: 300px;"

它也会按照我的意愿显示。现在的问题是当我尝试复制它时（右键单击，复制图像），它在 Firefox 上根本不起作用，在 Chrome/Opera 上只复制了上半部分。

图像是从 SVG 用 Javascript 生成的，如下所示：

var svgData = new XMLSerializer().serializeToString(svg[0]);
var img = new Image();
img.src = "data:image/svg+xml;base64," + btoa(svgData);

svg 是一个 jQuery 元素，在尝试将其附加到文档时会按预期显示。我需要一个实际图像而不是仅仅使用 svg 标签的原因是我希望用户能够轻松地复制图像。该应用程序基本上是一个包含数千种可能的背景/前景组合的编辑器，因此我不能简单地将这个 SVG 转换为使用外部工具的图像。

我做错了什么？

编辑：更完整的 jsfiddle：http://jsfiddle.net/p2Lv5sa0

【问题讨论】：

【解决方案1】：

不要通过样式指定 SVG 的尺寸。通过实际属性分配它们：

<svg id="svg" width="320" height="320" >

然后生成的图像将被创建为正确大小，并且复制/粘贴也将起作用。

【讨论】：