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

Posted 2023-03-05

【中文标题】HTML：Base64 图像显示/复制高度错误

【英文标题】：HTML: Base64 image displaying/copying with wrong height

【发布时间】：2015-08-28 16:20:43

【问题描述】：

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

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

style="height: 300px;"

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

图像是从 SVG 用 Ja​​vascript 生成的，如下所示：

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

【问题讨论】：

我猜是原始 svg 数据有问题 - 例如绘图板尺寸？您能否放置一个更完整的 jsfiddle，其中包含生成的 SVG 示例，然后包含转换代码？

当然，我刚刚添加了它。

【参考方案1】：

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

<svg id="svg"   >

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

演示：http://jsfiddle.net/p2Lv5sa0/2/

【讨论】：

完美运行，非常感谢！我还了解到在 jquery 元素上使用 .width(x) 和 .height(x) 会改变样式，而不是实际的宽度和高度属性。