jquery之将 SVG 导出为 PNG，图像位于 SVG 内

我正在尝试创建一个网站，您可以使用 Raphael.js 在另一个图像上绘制图像。绘图部分已完成，我可以将线条导出为 png 格式。 我将图像插入到由函数 paper.image() 生成的 SVG raphael 中； 不幸的是我的导出功能不包括导入的图像。

这些是我正在使用的脚本，但我认为我并没有全部使用它们。

<script src="../jquery-2.0.1.min.js"></script> 
<script src="raphael-min.js"></script> 
<script src="rgbcolor.js"></script> 
<script src="canvg.js"></script> 
<script src="StackBlur.js"></script> 
<script src="svg.min.js"></script> 

这是导出函数 $('#save').onmousedown...

var canvas = document.getElementById('canvas2'); 
var svg = document.getElementById('canvas'); 
svg = svg.innerHTML; 
canvg(canvas, svg); 
var img_url = canvas.toDataURL('image/png'); 
$('#converted_image').attr('src', img_url); 
var img = canvas.toDataURL("image/png"); 
document.write('<img src="'+img+'"/>'); 

以下是我如何通过代表图像的按钮导入图像 $('#img1').onmousedown...

paper.clear(); 
var c = paper.image("images/img1.png", 10, 10, 200, 200); 

以下是 dom 树中的输出，以图像和白线为例。

<div id="canvas"> 
    <svg height="300" version="1.1" width="300"  
         xmlns="http://www.w3.org/2000/svg" 
         style="overflow: hidden; position: relative; " id="canvassvg"> 
        <desc>Created with Raphaël 2.1.0</desc> 
        <defs></defs> 
        <image x="10" y="10" width="200" height="200" 
               preserveAspectRatio="none" href="images/img1.png"> 
        </image> 
        <path style="stroke-linecap: round; stroke-linejoin: round; " 
              fill="none" stroke="#ffffff"  
              d="M383,201L383,201L383,202L383,203" 
              stroke-linecap="round" stroke-linejoin="round" stroke-width="4"> 
        </path> 
    </svg> 
</div> 

非常感谢您的回复，请原谅我的英语。

请您参考如下方法:

我已经使用蜡染成功地完成了此操作，您可以在此处下载:http://xmlgraphics.apache.org/batik/tools/rasterizer.html

获得 SVG 后，只需将 svg 保存到文件并将其传递给 batik，就完成了!输出非常漂亮的 PNG(甚至在远程包含图像时也能工作)。