0

我使用 Raphael 创建了一个 SVG，我想将其捕获并转换为 PNG，然后在打开的窗口中显示。我看过其他一些堆栈溢出的答案，比如这个。我实施了 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 在 canvas var 中被正确捕获。但是，toDataURL 行会引发错误：“TypeError: 'null' is not an object (evalating 'canvas.toDataURL')”我知道我的示例有点不同，因为我没有实际的 canvas 标签我的 html，只是要获取画布的 div。但是，鉴于画布被正确捕获，我不明白为什么第二行会引发该错误。

4

1 回答 1

0

根据上面的建议使用 canvg 和raphael.export.js，我已经解决了我的问题（有点）。我的最小示例现在如下所示：

<html>
    <head>
        <script src="lib/raphael-min.js"></script>
        <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
        <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/StackBlur.js"></script>
        <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script> 
        <script src="lib/raphael.export.js"></script>
    </head>
    <body>

    <div id="raph_canvas"></div><br> 
    <canvas id="html_canvas" width="50px" height="50px"></canvas>

    <script language="JavaScript">
    var test=Raphael("raph_canvas",50,50);
    var rect=test.rect(0,0,50,50);
    rect.attr({fill: '#fff000', 'fill-opacity':1, 'stroke-width':1})

    window.onload = function() {
        var canvas_svg = test.toSVG();
        canvg('html_canvas',canvas_svg);
        var canvas_html = document.getElementById("html_canvas");
        window.location = canvas_html.toDataURL("image/png");
    }

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

现在的问题是我的实际应用程序，它有点复杂，不起作用，但我可能会发布一个单独的问题。

于 2014-06-24T19:04:32.230 回答