使用 SVG 内的图像将 SVG 导出为 PNG

Question

I am trying to make a website where you can draw an image on top of another image using Raphael.js. The drawing parts are finished, and I am able to export the lines as a png. I insert images to the SVG raphael generates by the function paper.image() ; unfortunately my export function doesn't include the imported image.

These are the scripts I'm using, but I don't think I use them all.

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

Here's the export-function $('#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+'"/>');

Here's how I import images by a button which represents the image $('#img1').onmousedown ...

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

Here's how the output looks like in the dom-tree with the image and a white line as example.

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

Thank you very much for any reply, and please excuse my english.

Answer 1

I've successfully done this using Batik, which you can download here: http://xmlgraphics.apache.org/batik/tools/rasterizer.html

Once you have the SVG, it's just a matter of saving the svg to a file and passing it to batik, and you're done! Outputs a very nice PNG (and even works when images are included remotely).

Answer 2

Have you tried the Canvas drawImage() method?

Example here: https://developer.mozilla.org/samples/canvas-tutorial/3_1_canvas_drawimage.html

Answer 3

The answer proposed here worked for me!

After defining your Raphael object, you should do something like:

raphaelObj.attr('xmlns:xlink',"http://www.w3.org/1999/xlink");

Answer 4

I THINK IT SHOULD BE WORK

 function convertsvg(selectors) { [].forEach.call(document.querySelectorAll(selectors), function (div) { try { var sourceImage; var imgs = document.getElementById('svgpng'), svg = div.querySelector('svg'), can = div.querySelector('canvas'), ctx = can.getContext('2d'); can.width =500; can.height = 550; sourceImage = new Image; sourceImage.width = can.width; sourceImage.height = can.height; sourceImage.onload = function () { ctx.drawImage(sourceImage,80,90); imgs.src = can.toDataURL(); }; sourceImage.src = svg ? svgDataURL(svg) :""; } catch (e) { console.log(e) } }); }} function svgDataURL(svg) { var svgAsXML = (new XMLSerializer).serializeToString(svg); return "data:image/svg+xml," + encodeURIComponent(svgAsXML); }

 <div id="forsvgtopng"> <div id="svgelemntdiv"> <svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="150" height="150" fill="rgb(0, 255, 0)" stroke-width="1" stroke="rgb(0, 0, 0)"/> </svg> </div> <div class="canvasdiv"> <canvas ></canvas> </div> <div class="pngdiv"> <img id="svgpng" /> </div> </div>

call the javascript function like convertsvg('#forsvgtopng')