0

私の最終的な目標は、レンダリングされたプレゼンテーション MathML を .PNG ファイルに保存することです。危険なプログラミングについて十分に知っている:-)これを行うためのより良い方法があるかもしれません...キャンバス要素に方程式を描いてから、キャンバス要素を.PNGとして保存しようとしています。https://developer.mozilla.org/en/HTML/Canvas/Drawing_DOM_objects_into_a_canvasにあるコードから始めて、次のように変更しました。

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style="border:2px solid black;" width="200" height="200">
</canvas>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
        "<foreignObject width='100%' height='100%'>" +
        "<div xmlns='http://www.w3.org/1998/Math/MathML'     style='fontsize:40px'>" +
        "<math>" +
        "<mtable>" +
        "<mtr>" +
        "<mtd columnalign='right'>" +
            "<mn>2</mn>" +
            "<mi>x</mi>" +
            "<mo>+</mo>" +
            "<mn>3</mn>" +
            "<mo>&#8722;</mo>" +
            "<mn>3</mn>" +
         "</mtd>" +
         "<mtd columnalign='center'> " +              
            "<mo>=</mo>" +
        "</mtd>" +
        "<mtd columnalign='left'> " +              
            "<mn>9</mn>" +
            "<mo>&#8722;</mo>" +
            "<mn>3</mn>" +
         "</mtd>" +
        "</mtr>" +
        "</mtable>" +
        "</math>" +
        "</div>" +
        "</foreignObject>" +
        "</svg>";

var svg = new (self.BlobBuilder || self.MozBlobBuilder || self.WebKitBlobBuilder);
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
svg.append(data);
var url = DOMURL.createObjectURL(svg.getBlob("image/svg+xml;charset=utf-8"));
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
};
img.src = url;

window.open(canvas.toDataURL('image/png'));

</script>

</body>
</html>

window.open をコメント アウトすると、canvas 要素に MathML が表示されますが、toDataURL によって生成された .PNG は透過的です (数式はありません)。私は何が欠けていますか？前もって感謝します...

4

1 に答える 1

0

すぐに私が目にする問題は、画像が読み込まれるまでキャンバスのレンダリングを延期することですが、window.open読み込まれたことを確認せずにコードを呼び出すことです。次のようなことをする必要があります

img.onload = function() {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
    // now the image has been drawn for sure *before* opening the window
    window.open(canvas.toDataURL('image/png'));
};
img.src = url;
于 2012-04-17T19:17:11.493 に答える