Javascript 将div内的Raphael画布转换为PNG
我已经使用Raphael创建了一个SVG，我希望捕获并转换为PNG，然后显示在打开的窗口中。我已经看了一些其他堆栈溢出的答案。我实现了奥利格对那个问题的回答。下面是我正在做的一个例子：Javascript 将div内的Raphael画布转换为PNG,javascript,canvas,svg,raphael,canvg,Javascript,Canvas,Svg,Raphael,Canvg,我已经使用Raphael创建了一个SVG，我希望捕获并转换为PNG，然后显示在打开的窗口中。我已经看了一些其他堆栈溢出的答案。我实现了奥利格对那个问题的回答。下面是我正在做的一个例子： <html> <head> <script src="NBA_test/lib/raphael-min.js"></script> </head> <body> <div id="can
<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>
var测试=拉斐尔（“画布”，50,50）；
var rect=test.rect（0,0,50,50）；
rect.attr（{fill:'#fff000'}）
window.onload=函数（）{
var canvas=document.getElementById（“canvas”）；
window.location=canvas.toDataURL（“image/png”）；
}
这将绘制一个黄色矩形，并将其输出为png。控制台确认SVG在canvas变量中被正确捕获。但是，toDataURL行抛出一个错误：“TypeError:‘null’不是对象（评估‘canvas.toDataURL’）”我知道我的示例有点不同，因为我的html中没有实际的canvas标记，只是要获取画布的div。但是，鉴于画布被正确捕获，我不明白为什么第二行会抛出该错误。根据上述建议使用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>
var测试=拉斐尔（“拉斐尔画布”，50,50）；
var rect=test.rect（0,0,50,50）；
attr（{fill:'#fff000'，fill opacity:1'，stroke width:1}）
window.onload=函数（）{
var canvas_svg=test.toSVG（）；
canvg（'html_canvas'，canvas_svg）；
var canvas_html=document.getElementById（“html_canvas”）；
window.location=canvas_html.toDataURL（“image/png”）；
}
现在的问题是，我的实际应用程序（稍微复杂一点）不起作用，但我可能会发布一个单独的问题。toDataUrl仅适用于html5画布元素，对Raphael不起作用试试这里的建议你在谈论这个问题的第一个答案吗？答案的第二步正是我在这里所做的。似乎仍然依赖于toDataURL。我不清楚在这种情况下我将如何使用canvg。是的，他们用于将svg渲染到画布，然后在画布上调用
toDataUrltoDataUrl