当我将 SVG 内容绘制到画布上时，SVG 被裁剪答案

【问题标题】：When I draw my SVG contents to a canvas, the SVG is cropped当我将 SVG 内容绘制到画布上时，SVG 被裁剪
【发布时间】：2012-11-26 00:55:11
【问题描述】：

我有一堆 SVG 文本需要绘制到画布上。我正在将我的 SVG 对象转换为 SVG 数据 URI，将其应用于图像的源，然后将该图像绘制到画布上，但由于某种原因，它会在一定宽度和高度后剪切文本。

我知道问题不在于画布大小，因为我还先将其他图像绘制到画布上（这比文本更宽更高），没有任何问题。另一个奇怪的事情是，如果我把图像附加到身体上，它就会完美地出来。

var imageText = new Image();
imageText.src = "data:image/svg+xml;base64," + btoa($("#text_container").html());
imageText.onload = function() { context.drawImage(imageText, 0, 0); };

#text_container 是我的 DIV，包含所有 SVG 代码。

编辑：为了提供更多细节，这是我在下面写的评论：我正在构建一个 JS 应用程序，让用户可以创建自定义足球。您可以更改球和文本的不同颜色和特征，因此可以归结为带有一些 SVG 文本的多个 DIV（因为文本沿着弧形路径移动）。我可以获取 DIV 的背景图像并将其绘制到画布上，以创建足球。当我尝试将文本绘制到画布上时遇到问题，因为它正在被裁剪。然后我将把那个canvas元素转换成PNG供用户保存。

我将文本向上和向左移动更多，以便您可以更好地看到裁剪。如您所见，球抽得很好。 http://i.imgur.com/Sngu4.png

【问题讨论】：

你为什么要这么做？所有支持画布的浏览器也都支持 SVG。
我正在构建一个 JS 应用程序，让用户可以创建自定义足球。您可以更改球和文本的不同颜色和特征，因此可以归结为带有一些 SVG 文本的多个 DIV（因为文本沿着弧形路径移动）。我可以获取 DIV 的背景图像并将其绘制到画布上，以创建足球。当我尝试将文本绘制到画布上时遇到问题，因为它正在被裁剪。然后我将把那个canvas元素转换成PNG供用户保存。

标签： javascript html canvas svg drawing

【解决方案1】：

在黑暗中拍摄....drawImage() 有一些可以设置的尺寸参数吗？也许它有一个默认值，它正在绘制大小，然后剪裁其余部分。只是一个想法......

也可能是因为您的图像是动态创建的，因此缺少某种图像大小参数，这些参数通常会包含在 .jpg 文件中，drawImage() 函数可能正在寻找这些参数。

【讨论】：

【解决方案2】：

假设 context 是您的画布的 RenderingContext（“2D”），您应该在 context.drawImage() 函数中包含“destiny width”和“destiny height”参数：

context.drawImage(image, dx, dy, dw, dh)

如果myCanvas是你的canvas对象的id（$是jQuery的函数），你可以调用：

var dw = $('myCanvas').width();
var dh = $('myCanvas').height();
context.drawImage(image, 0, 0, dw, dh);

这将缩放图像以适合整个画布。我的建议是首先“查看”svg 图像是什么（即，将其添加到正文并测量文本的坐标：sx、sy、sw 和 sh，在上面的链接中），因为您可能必须裁剪它“故意”以便将其放置在您想要的位置：

context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

【讨论】：

没有骰子。它最终占用了大量文本并将其炸毁。

【解决方案3】：

我遇到了这个完全同样的问题，但我想我刚刚找到了解决方案。

仅在 SVG 元素上设置 width 和 height 是不够的。显然，您还需要设置viewBox：

<svg width="720" height="400" viewBox="0 0 720 400"></svg>

这应该会在画布上正确渲染图像。 :)

【讨论】：