jquery - export SVG to PNG with image inside SVG -
i trying make website can draw image on top of image using raphael.js. drawing parts finished, , able export lines png. insert images svg raphael generates function paper.image()
; unfortunately export function doesn't include imported image.
these scripts i'm using, don't think 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 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 import images button represents image $('#img1').onmousedown
...
paper.clear(); var c = paper.image("images/img1.png", 10, 10, 200, 200);
here's how output looks in dom-tree image , white line 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 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 reply, , please excuse english.
i've done using batik, can download here: http://xmlgraphics.apache.org/batik/tools/rasterizer.html
once have svg, it's matter of saving svg file , passing batik, , you're done! outputs nice png (and works when images included remotely).
Comments
Post a Comment