将 div 内的 Raphael 画布转换为 PNG答案

【问题标题】：Convert Raphael canvas inside div to PNG将 div 内的 Raphael 画布转换为 PNG
【发布时间】：2014-08-14 20:58:50
【问题描述】：

我使用 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。控制台确认 SVG 在 canvas var 中被正确捕获。但是，toDataURL 行会引发错误：“TypeError: 'null' is not an object (evalating 'canvas.toDataURL')”我知道我的示例有点不同，因为我没有实际的 canvas 标签我的 html，只是要获取画布的 div。但是，鉴于画布被正确捕获，我不明白为什么第二行会引发该错误。

【问题讨论】：

toDataUrl 仅适用于 html5 画布元素，它不适用于 Raphael 试试这里的建议 stackoverflow.com/questions/3975499/…
你说的是那个问题的第一个答案吗？该答案的第 2 步正是我在这里所做的。似乎仍然依赖 toDataURL。我不清楚在这种情况下如何使用 canvg。
是的，他们使用this library 将svg 渲染到画布上，然后然后调用toDataUrl。所以基本上你必须先转换你的svg，把它画到canvas元素上，然后调用toDataUrl。
好吧，所以我添加了一个canvas元素，我们称之为canvas_html，然后在将svg加载到var canvas后将其放入我的onload中：canvg('html_canvas',canvas)。这不应该将该 SVG 代码加载到 html 画布中吗？我收到一个错误：“TypeError: 'undefined' is not a function (evalating 's.substr(0,1)')”

标签： javascript canvas svg raphael canvg

【解决方案1】：

按照上面的建议使用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>

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

【讨论】：