0

Raphael を使用して、キャプチャして PNG に変換し、開いているウィンドウに表示する SVG を作成しました。this one のような他のスタックオーバーフローの回答を見てきました。その質問に対するolliegの回答を実装しました。これが私がやっていることの例です:

<html>
    <head>
        <script src="NBA_test/lib/raphael-min.js"></script>
    </head>
    <body>

    <div id="canvas"></div><br>

    <script language="JavaScript">
    var test=Raphael("canvas",50,50);
    var rect=test.rect(0,0,50,50);
    rect.attr({fill: '#fff000'})

    window.onload = function() {
        var canvas = document.getElementById("canvas");
        window.location = canvas.toDataURL("image/png");
    }

    </script>
    </body>
</html>

これにより、黄色の長方形が描画され、png として出力されます。コンソールは、キャンバス変数で SVG が正しくキャプチャされていることを確認します。ただし、toDataURL 行はエラーをスローします:「TypeError: 'null' はオブジェクトではありません ('canvas.toDataURL' を評価しています)」私のhtml、キャンバスを取得するdivだけです。ただし、キャンバスが正しくキャプチャされていることを考えると、2 行目でそのエラーがスローされる理由がわかりません。

4

1 に答える 1