Question

我使用Raphael创建了一个SVG，我想捕获并转换为PNG，然后在打开的窗口中显示。我查看了其他一些堆栈溢出答案like 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。控制台确认在canvas var中正确捕获了SVG。但是，toDataURL行会抛出一个错误：“TypeError：'null'不是一个对象（评估'canvas.toDataURL'）”我知道我的例子有点不同，因为我没有实际的canvas标签我的HTML，只是要获得画布的div。然而，鉴于正确捕获了画布，我不明白为什么第二行会抛出该错误。

Answer 1

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

<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>

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

将div内的Raphael画布转换为PNG

1 个答案: