使用JavaScript将SVG呈现为PNG

我的页面上有以下HTML元素：

<canvas id="canvas" width=400 height=400 />

我正在尝试将下面的标记呈现为PNG

<div style="font-size=40px">
  Fun with d3.js
</div>

使用d3.js的乐趣

我的JavaScript函数如下所示。它应该将包含文本“Fun with d3.js”的标记呈现为画布中的图像，但是，它没有被呈现。但是，如果我使用devtools插入原始HTML元素，SVG将呈现为合法的。在翻译的某个地方，Javascript似乎正在丢失html元素，但对于我来说，我无法理解为什么。t正在调用img.onerror事件，但提供的有用信息很少

renderToPNG: function() {
  var myCanvas = document.getElementById("canvas");
  var context = myCanvas.getContext("2d");
  var data = 
    '<svg width=\"400\" height=\"400\">' +
    '  <foreignObject width=\"100%\" height=\"100%\">' +
    '    <div style=\"font-size=40px\">' +
    '      Fun with d3.js' +
    '    </div>' +
    '  </foreignObject>' +
    '</svg>';
  var domURL = window.URL || window.webkitURL || window;
  var img = new Image();
  var svg = new Blob([data], {type:"image/svg+xml;charset=utf-8"});
  var url = domURL.createObjectURL(svg);

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

  img.src = url;
}

renderToPNG:function（）{
var myCanvas=document.getElementById（“canvas”）；
var context=myCanvas.getContext（“2d”）；
风险值数据=
'' +
'  ' +
'    ' +
“使用d3.js很有趣”+
'    ' +
'  ' +
'';
var domURL=window.URL | | window.webkitURL | | window；
var img=新图像（）；
var svg=newblob（[data]，{type:“image/svg+xml；charset=utf-8”}）；
var url=domURL.createObjectURL（svg）；
img.onload=函数（）{
drawImage（img，0,0）；
revokeObjectURL（url）；
}
img.src=url；
}

我试着运行你的代码，结果发现由于某种原因，

外来对象

不起作用。所以这可能是问题的根源

这还取决于您使用的浏览器。看看这个片段，它显示了SVG、画布和图像，您可以看到它们每个都有不同的问题（我看到画布在Chrome上变形了，在Safari上甚至没有显示）

函数renderToPNG（）{
var myCanvas=document.getElementById（“canvas”）；
var context=myCanvas.getContext（“2d”）；
var数据=
'' +
'' +
'  ' +
'    ' +
“使用d3.js很有趣”+
'    ' +
'  ' +
'  ' +
'';
var domURL=window.URL | | window.webkitURL | | window；
var img=新图像（）；
var svg=新的Blob（[data]{
类型：“image/svg+xml；charset=utf-8”
});
var url=domURL.createObjectURL（svg）；
img.onload=函数（）{
drawImage（img，0,0）；
revokeObjectURL（url）；
}
img.src=url；
控制台调试（img）；
$（'#image'）。追加（img）；
}
renderToPNG（）
#svg，
#帆布，
#形象{
边框：1px实心；
宽度：200px；
高度：200px；
显示：内联块；
垂直对齐：底部对齐；
}
#svg{
边框颜色：红色
}
#帆布{
边框颜色：绿色
}
#形象{
边框颜色：蓝色
}

使用d3.js的乐趣
您上面介绍的代码无效。你需要在
var data=
@LukeWoodward下的行中转义属性值周围的引号。我已经编辑了我的主要帖子以包含转义字符，但仍然在调用img.onerror事件。onerror输出的错误消息是什么？