Export SVG to PNG with image inside SVG

Question

I am trying to create a website where you can draw an image on top of another image using Raphael.js. The drawing details are finished and I can export the lines as png. I embed images in SVG raphael by generating the paper.image() function; Unfortunately, my export function does not include the imported image.

These are scripts that I use, but I don’t think I use all of them.

 <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 with a button that represents the image $('#img1').onmousedown ...

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

Here's what the output in the dom-tree looks like with an image and a white line as an 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> 

Thanks so much for any answer, and please excuse my English.

Answer 1

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

Once you have SVG, it's just a matter of saving svg to a file and transferring it to batik, and you're done! It displays a very beautiful PNG (and even works when images are turned on 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 suggested 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 THAT IT SHOULD WORK

 <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 javascript function like converttsvg ('# forsvgtopng')

 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); }