canvas - キャンバス要素を画像としてsvgに追加する方法はありますか

Question

ここにjsfiddleがあります：

http://jsfiddle.net/Gt7wQ/

私がやろうとしているのは、描画したばかりの一時的なキャンバス要素を SVG ボードに追加することです。それは可能ですか？

私が今やろうとしていることは次のとおりです。

svg.append("image")
    .attr("xlink:href", temp_canvas)
    .attr("x", 0)
    .attr("y", 0);

ありがとう

Answer 1

toDataURL()on your canvas 要素を使用して を生成しdata-uriます。

また、d3 svg の幅と高さの属性も指定します。

svg.append("image")
    .attr("xlink:href", temp_canvas.toDataURL())
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 300)
    .attr("height", 300);

UPDATED FIDDLE

キャンバス上のコンテンツがページ以外のソースからのものである場合 (つまり、別のドメインから生成されたキャンバスに描画された画像)、これは機能しないことに注意してください。