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

HTML: Base64 image displaying/copying with wrong height

本文关键字：复制 高度 错误 显示 Base64 图像 HTML      更新时间：2023-09-26

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

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

style="height: 300px;"

它也将按照我想要的方式显示。现在的问题是当我尝试复制它（右键单击，复制图像）时，它在Firefox上根本不起作用，并且只有它的上半部分在Chrome/Opera上复制。

该图像在 Javascript 中从 SVG 生成，如下所示：

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 的尺寸。通过实际属性分配它们：

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

然后，将创建正确大小的结果图像，复制/粘贴也可以。

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

相关文章：