使用JavaScript将SVG渲染为PNG

Question

The following HTML element is on my page:

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

And I am trying to render the following tag as a PNG.

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

My JavaScript function is as follows. It should be rendering the tag containing the text "Fun with d3.js" as an image in the canvas, however, it is not being rendered. But, if I insert the raw HTML elements using devtools, the SVG renders as legitimate. Somewhere in translation the Javascript seems to be losing the html element, but for the life of me cannot figure out why. TThe img.onerror event is being called but provides very little in terms of useful information.

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

I tried running your code and it turns out the foreignObject doesn't work for some reason. So that might be at the root of the problem.

It also depends on which browser you are using. Take a look at the snippet, it shows the SVG, the Canvas, and the Image, and you can see each of them having different problems ( I see the canvas distorted on Chrome , and on Safari it doesn't even show).

 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(); 

 #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 } 

 <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> 

One thing to notice: I added the SVG doctype declaration on the JS code since that's how it's supposed to work when using the SVG as source for an Image (it acts as if it was an external file).

Just my two cents. Hoping for a better answer...