1

HTML5キャンバスオブジェクトの簡単なエクスポート関数の作成に取り組んでいます。実際の図面を含むid='infovis-canvaswidget'を作成します。子要素は、その図面のすべてのラベルです。次を使用して、canvas要素を取得できます。

var ele  = document.getElementById("infovis-canvas");
var dataUrl = ele.toDataURL("image/png");
window.open(dataUrl, "toDataURL() image", "width=500, height=500");

ただし、これはラベル要素を出力しません。DOMの構成を理解するには、添付のスクリーンショットを参照してください。子要素を「infovis-canvaswidget」にバインドして、それらもエクスポートされるようにする方法はありますか？スクリーンショット

4

1 に答える 1

0

かなりの努力を払ったようですが、とにかく直接ではなく、純粋なDOM要素の画像データを取得することはできません。

しかし、それはあなたが選択肢から外れているという意味ではありません。私が見る限り、2つのオプションがありますが、どちらもラベルをキャンバスに配置する必要があるため、実際には同じ目標を持つ2つのアプローチにすぎません。

最初のオプションは、プロジェクトの機能を変更することです（おそらく根本的に変更するので、これは面倒かもしれません）。これにより、ラベルがキャンバスに直接レンダリングされます。このように、キャンバスから画像データを取得するとき、ラベルはすでにそこにあります。

2番目のオプションは、画像データを取得するときに、DOM要素をオブジェクトに変換してキャンバスに描画することです。html2canvasプロジェクトは、この手法を実装し、役立つ可能性があるため、検討する必要があるかもしれません。

幸運を！

于 2012-04-23T18:24:08.583 に答える