CODEWITHSUNDEEP
jquerycanvassvgraphael
kinkajou
kinkajou

Reputation: 3728

SVG to image(dataURI) using raphael , canvg and jquery

I have converted svg to image using Raphael.js , canvg and jquery.

But want to make the image at the center of rectangular view port in svg as well as png. and resize it to particular size like 800*600 etc using chrome.

I am getting the result image that is small and not centered to rectangle. How can I acheive this. I have jsfiddle setup. Here The fiddle I have compiled. Also I am getting "ERROR: Element 'html' not yet implemented. " in the fiddle error although I don't have leading spaces( or I don't have idea).

I don't have "ERROR: Element 'html' not yet implemented." error in local pc.

Thank you very much for your help.

Upvotes: 1

Views: 3037

Answers (1)

mccannf
mccannf

Reputation: 16659

You were trying to create a canvas from a HTML string that contained two elements:

  • The SVG element you wanted to convert
  • The Canvas element you wanted to use to in order convert the SVG into a PNG.

Canvg doesn't like having multiple elements to parse, and so complained about "HTML".

Have a look at this fiddle forked from yours: http://jsfiddle.net/LVZEX/2/

All it does is add an extra replace that removes the canvas tag from the end of the HTML string extracted from the map div

      var svg = $('#map').html().replace(/>\s+/g, ">").replace(/\s+</g, "<").replace(/<canvas.+/g,"");

Upvotes: 4

Related Questions