Javascript 如何以图像（png/gif）的形式显示/下载RaphaelJs画布？

如何让用户下载RaphaelJs生成的图像？我更希望它在HTML上显示为

，这样他们就可以右键单击图像将其保存到桌面上。

下面是一个简单的示例，说明如何将RaphelJs转换为图像

需要的图书馆是：

• 拉斐尔-
• 拉斐尔.出口-
• canvg-

-

window.onload=函数（）{
//从一幅简单的拉斐尔画作开始
var paper=新拉斐尔（document.getElementById（'raphaelDiv'），200200）；
var循环=纸张循环（50,40,10）；
圆圈.attr（“填充”，“#f00”）；
圆圈.attr（“笔划”，“#fff”）；
var circle2=纸圈（70,60,50）；
//使用raphael.export从纸张中获取SVG
var svg=paper.toSVG（）；
//使用canvg将SVG绘制到空画布上
canvg（document.getElementById（'myCanvas'），svg）；
//在设置img.src之前，我必须使用setTimeout等待画布完全加载，
//可能不需要像这样的简单绘图，但我最终得到了一张空白图像
setTimeout（函数（）{
//从画布获取dataURL，并在图像上将其设置为src
var dataURL=document.getElementById（'myCanvas'）.toDataURL（“image/png”）；
document.getElementById（'myImg'）.src=dataURL；
}, 100);
}

---

沃拉，你有你的形象！我希望这能对某人有好处

可能重复：我已经看到了这个问题。我已经尝试过使用canvg将RaphaelJs生成的SVG放到画布上，但这只是成功的一部分。我的图像由2个png图像和5个多边形组成，我使用canvg仅将其中一个图像放到画布上？？我尝试删除所有多边形（raphael）/路径（svg），现在我在画布上获得了这两个图像。。canvg中不支持路径？我找到了导致问题的原因。。canvg doesent似乎支持“填充不透明度”，我从多边形中删除了它，但它的工作并不完美！工作正常，但IE<9不支持toDataURL:(

<script type="text/javascript" src="raphaeljs.js"></script>        
<script type="text/javascript" src="raphael.export.js"></script>        
<script type="text/javascript" src="canvg.js"></script>

   <script>

   window.onload = function(){

       //Start with a simple raphaelJs drawing
       var paper = new Raphael(document.getElementById('raphaelDiv'), 200, 200);
       var circle = paper.circle(50, 40, 10);
       circle.attr("fill", "#f00");
       circle.attr("stroke", "#fff");
       var circle2 = paper.circle(70, 60, 50);

       //Use raphael.export to fetch the SVG from the paper
       var svg = paper.toSVG();

       //Use canvg to draw the SVG onto the empty canvas
       canvg(document.getElementById('myCanvas'), svg);


       //I had to use setTimeout to wait for the canvas to fully load before setting the img.src,
       //will probably not be needed for a simple drawing like this but i ended up with a blank image
       setTimeout(function() {
           //fetch the dataURL from the canvas and set it as src on the image
           var dataURL = document.getElementById('myCanvas').toDataURL("image/png");
           document.getElementById('myImg').src = dataURL;
       }, 100);
   }

</script>

<!--The containers below are set to be invisible, we need them for the 
    conversion but we dont need to se them-->
<div id="raphaelDiv" style="display:none;"></div>
<canvas id="myCanvas" style="display:none;"></canvas>


<img id="myImg" src="">