Question

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

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

我正在尝试将以下标记呈现为PNG。

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

我的JavaScript功能如下。它应该呈现包含文本的标签＆＃34; Fun with d3.js＆＃34;但是，作为画布中的图像，它不会被渲染。但是，如果我使用devtools插入原始HTML元素，则SVG呈现为合法的。在翻译的某个地方，Javascript似乎正在失去html元素，但对于我的生活无法弄清楚为什么。正在调用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;
}

Answer 1

我尝试运行您的代码，结果foreignObject由于某种原因无效。所以这可能是问题的根源。

这还取决于您使用的是哪种浏览器。看一下片段，它会显示SVG，画布和图像，你可以看到它们每个都有不同的问题（~~我看到Chrome上的画布扭曲~~，而在Safari上它没有＆＃39; t甚至显示。）

＆＃13;

function renderToPNG() {
  var myCanvas = document.getElementById("canvas");
  var context = myCanvas.getContext("2d");
  var data =
    '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">' +
    '<svg version="1.1"' +
    '     baseProfile="full"' +
    '     width="200" height="200"' +
    '     xmlns="http://www.w3.org/2000/svg">' +
    '  <foreignObject width="100%" height="100%">' +
    '    <div style="font-size=40px; color: black">' +
    '      Fun with d3.js' +
    '    </div>' +
    '  </foreignObject>' +
    '  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />' +
    '</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;

  console.debug(img);

  $('#image').append(img);
}

renderToPNG();

＆＃13;

#svg,
#canvas,
#image {
  border: 1px solid;
  width: 200px;
  height: 200px;
  display: inline-block;
  vertical-align: bottom;
}

#svg {
  border-color: red
}

#canvas {
  border-color: green
}

#image {
  border-color: blue
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="svg" version="1.1" baseProfile="full" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> 
  <foreignObject width="100%" height="100%"> 
    <div style="font-size:40px; color: black"> 
      Fun with d3.js 
    </div> 
  </foreignObject> 
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
</svg>
<canvas id="canvas" width="200" height="200"></canvas>
<div id="image"></div>

＆＃13;

有一点需要注意：我在JS代码中添加了SVG doctype声明，因为当使用SVG作为Image的源时，它应该如何工作（它就好像它是一个外部文件）。

只是我的两分钱。希望得到更好的答案...

使用JavaScript将SVG渲染为PNG

1 个答案: