は、次のHTML要素のJavaScript

Question

を使用してPNGにSVGをレンダリング私のページにあります：

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

そして私はPNGとして次のタグをレンダリングしようとしています。

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

JavaScriptの機能は次のとおりです。それはキャンバス内のイメージとして "Fun with d3.js"というテキストを含むタグをレンダリングする必要がありますが、レンダリングされていません。しかし、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、Canvas、Imageが表示され、それぞれに異なる問題があることがわかります（ Chromeでキャンバスが歪んでいるのがわかります） 、Safariでは表示されません） 。

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>

一つ注意すべきこと：そのイメージのソースとしてSVGを使用した場合、動作するようになっています方法ですので、私はJSコードのSVGのDOCTYPE宣言を追加しました（それはそれかのように動作します外部ファイルでした）。

ちょうど私の2セントです。より良い答えを期待して...