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

Question

4

因此，我有一个简单的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

- Chokapik

2

我猜原始的SVG数据存在问题，比如绘图板大小？您能否提供一个更完整的JSFiddle示例，其中包括生成的SVG示例，然后再包括转换代码？ - Matt Fellows

没问题，我刚刚添加了它。 - Chokapik

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yuriy Galanter · Accepted Answer

不要通过样式来指定SVG的尺寸，而是通过实际属性来指定：

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

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