小编rea*_*ter的帖子

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

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

<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-tree 中的样子，以图像和白线为例。

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