如何将内联 svg（在 DOM 中）绘制到画布上？答案

【问题标题】：How to draw an inline svg (in DOM) to a canvas?如何将内联 svg（在 DOM 中）绘制到画布上？
【发布时间】：2015-01-29 13:41:42
【问题描述】：

好吧，我需要一些关于将 .svg 文件/图像转换为 .png 文件/图像的帮助...

我的页面上显示了一个 .svg 图像。它保存在我的服务器上（作为 .png 文件）。我需要根据需要将其转换为 .png 文件（单击按钮）并将 .png 文件保存在服务器上（我将使用 .ajax 请求执行此操作）。

但问题在于转换。

我阅读了很多关于 html5 Canvas 的内容，这可能有助于完成我现在需要做的事情，但我找不到任何明确的解决方案来解决我的问题，而且，tbh，我不明白我发现的所有内容。 . 所以我需要一些关于我必须做的方式的明确建议/帮助。

这里是“html idea”模板：

<html>
    <body>
        <svg id="mySvg" width="300px" height="300px">
            <!-- my svg data -->
        </svg>
        <label id="button">Click to convert</label>
        <canvas id="myCanvas"></canvas>
    </body>
</html>

还有一些js：

<script>
    $("body").on("click","#button",function(){
        var svgText = $("#myViewer").outerHTML;
        var myCanvas = document.getElementById("canvas");
        var ctxt = myCanvas.getContext("2d");
    });
</script>

然后，我需要将 svg 绘制到 Canvas 中，取回 base64 数据，并将其保存在我的服务器上的 .png 文件中......但是......如何？我读到了很多不同的解决方案，我实际上……迷路了……我正在研究一个 jsfiddle，但我实际上……无处可去……http://jsfiddle.net/xfh7nctk/6/……感谢阅读/帮助

【问题讨论】：

‘一个 .svg 图像 [...] 被保存 [...] 为一个 .png 文件‘这是如何工作的？！
看看stackoverflow.com/a/3769883/783219
请查看我在此处提供的this answer。它应该可以解决您的问题

标签： javascript html canvas svg png

【解决方案1】：

自从这个问题提出了一些其他问题后，我才来很久，因为接受的答案可能会产生不良行为。

@K3N 解决方案几乎是正确的，但我会反对使用svgElement.outerHTML。
相反，人们应该更喜欢new XMLSerializer().serializeToString(svgElement)。

此外，不需要使用 blob 和 URL API，简单的 dataURI 具有更好的跨浏览器兼容性。

所以一个完整的版本应该是：

function drawInlineSVG(svgElement, ctx, callback) {
  var svgURL = new XMLSerializer().serializeToString(svgElement);
  var img = new Image();
  img.onload = function() {
    ctx.drawImage(this, 0, 0);
    callback();
  }
  img.src = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgURL);
}

// usage:
drawInlineSVG(document.querySelector('svg'), ctxt, function() {
  console.log(canvas.toDataURL())
});

【讨论】：

我尝试了上一个答案，如果 SVG 没有 'xmln' 属性，它将失败。 @Kaiido 的答案是一个很好的改进，并且也适用于“格式错误”的 SVG。
@user305883，感谢您的反馈。只是为了让您知道 <svg> 元素在附加到 HTML 文档时不必有 xmlns 声明。所以你的 SVG 不是“格式错误”，只是它是一个 svg 元素，而不是一个 svg 文档。 dataURI 应该代表一个文档，因此失败。 XMLSerializer() 确实为我们处理了转换。
大家好 - 很抱歉将这个问题拖到已经回答的问题上。我正在关注这封信的回答，一切正常，除了当我到达 canvas.toDataURL() 时，我得到的是 SecurityError 。我正在使用这种方法将 Highcharts.js svg 转换为 png，所以我不确定 CORS 的问题出在哪里（从我读过的内容来看，这是一个 CORS 问题？？） highcharts svg 全部呈现在浏览器中.
@MartinOLeary 这不是 CORS 问题。在画布上绘制一些 svg 元素时，一些 UA 有安全限制。这发生在哪个浏览器上？如果 IE
@TanyaGupta，注意根<svg> 节点必须绝对设置width 和height 属性（不是像% 这样的相对属性）；请注意，IE 没有在指向 svg 文档的 HTMLImage 上设置 width 或 height（也没有设置它们的 naturalXXX 等效项）：对于此浏览器，您需要自己获取宽度，或者从svg 标记，来自 in 文档节点的 offsetXXX ；请注意，当通过 drawImage 将 svg 绘制到画布时，所有 IE <foreignObject> 元素时，Safari >= 9 确实会污染画布。

【解决方案2】：

对于内联 SVG，您需要：

将 SVG 字符串转换为 Blob
获取 Blob 的 URL
创建一个图像元素并将 URL 设置为src
加载后 (onload)，您可以在画布上将 SVG 绘制为图像
使用 toDataURL() 从画布中获取 PNG 文件。

例如：

function drawInlineSVG(ctx, rawSVG, callback) {

    var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"}),
        domURL = self.URL || self.webkitURL || self,
        url = domURL.createObjectURL(svg),
        img = new Image;

    img.onload = function () {
        ctx.drawImage(this, 0, 0);     
        domURL.revokeObjectURL(url);
        callback(this);
    };

    img.src = url;
}

// usage:
drawInlineSVG(ctxt, svgText, function() {
    console.log(canvas.toDataURL());  // -> PNG data-uri
});

当然，这里的console.log只是举例。而是在此处存储/传输字符串。（我还建议在方法中添加一个onerror 处理程序）。

还记得使用width 和height 属性设置画布大小，或者使用属性从JavaScript 设置。

【讨论】：

这在 JSFiddle 和 JSFiddle 上都很完美......但是当我尝试在我的项目中使用它时，看起来绘图功能不起作用......
@Julo0sS 您在控制台中遇到了什么错误？你添加了一个 onerror 处理程序吗？尝试为各个阶段插入 console.log 并查看代码停止的位置。输出变量以查看它们是否实际包含数据或未定义。检查您是否正确抓取了 SVG outerHTML。我的 2 美分。
语法self.URL || self.webkitURL || self 的含义是什么，你能解释一下这个表达式的作用吗？
@K3N 你如何在console.log(canvas.toDataURL()); 中得到canvas ？
这个答案的问题是只有一部分 ger=nerated 图像出现转换为 png 图像，而不是整个 svg 图像转换