i'm running a rails app and trying to get a screenshot of an nvd3 graph in-browser.
from my testing, canvg and html2canvas can't render the css that accompanies nvd3. has anyone been able to create a png from an nvd3 svg?
html2canvas example - try rendering the nvd3 scatter on html2canvas preview. it's not working...
any ideas?
from the html2canvas FAQ we know that it cannot properly deal with svg.
i have very similar requirement and "example of how to export a png directly from an svg" solved my problem (internally it adopted svg-crowbar code). basically, you need to draw the svg to a canvas then export the image to png, and "explicitly set css style" for all svg element is the caveat to make the exported image like original.
Related
I was wondering if there is a mean to add a graph made with Highcharts into a draw2d canvas. I tried to use the class made to import external SVG SVGFigure, but it seems like the SVG is too complex to be used with this class according to this and my test.
draw2d.SVGFigure;
Thank you for your suggestions :)
I've figured out a solution, converting the svg to an image and use SetFigure class from draw2d to insert it in the canvas.
draw2d.SetFigure;
You can find an example here of the implementation with canvg or with vanilla js.
I am working on a data visualization project and I have used the Chart.js library for drawing and now I need to export the charts in pdf and png format, what is the best way for me to do it correctly? Thanks for helping my friends ...
If you want to create a feature to allow a user to download the created charts into a image, you can use the 'toDataURL()' function, and specify the canvas of each chart.
To download a canvas as a pdf you can use the jsPDF library, using the above function to retrieve the canvas and then specifying the dimensions.
I may be wrong but I believe you need to create the charts and display on a web page before converting them to an image/pdf. Hope this helps!
I want to generate a PNG image from a Gantt Google Chart.
I've tried the getImageURI() method, but it only works for core charts.
I've also tried getting the svg element and converting it to PNG but it doesn't look the same as the one displayed in the browser.
Also I've tried html2canvas but without success.
Any ideas on how to achieve this?
update
from google dev print png tried
jsfiddle
getting the svg element fiddle, then created a svg file from it, and converted it to png with an online converter, but it doesn't look the same.
I'm using a paper.js for creating a web based editor like Adobe Illustrator.
Issue which i'm facing is when i import a svg file which is quiet large then my canvas and when i try to print that svg using
newWindow.write("`<html><body>`"+paper.project.exportSVG();+"`</body></html>`")'
newWindow.print();
it covers the only part that is visible to canvas.
i also tried to zoom out the canvas using zoom-factor , but at that time there is a issue of original size of the svg.
though the dimensions are quiet large it can be cover within the a4 size page easily.
thanks in advance!!!
I believe this is a bug in the library, or a case of missing options. Could you open an issue for it on https://github.com/paperjs/paper.js/issues ? That's the better place to discuss this.
I have found the following resources concerning the more or less direct use of an
SVG exportet from Illustrator
to use for WebGl with three.js and d3.
Extrude, or, make 2d SVG path into 3d
http://threejs.org/docs/#Reference/Extras.Geometries/ExtrudeGeometry
https://github.com/josdirksen/learning-threejs/blob/master/chapter-06/05-extrude-svg.html
Illustrator/SVG to JavaScript workflow? (A templating library?)
None of these resources would ultimately help to directly use an SVG from Illustrator with three.js and d3.
What I need is either:
a method to directly use an SVG from Illustrator with three.js and d3
a conversion method to convert the SVG (also multiple path groups) from the Illustrator-SVG format to something that is usable with three.js and d3.
Think of it as : User uploads his svg logo and gets a 3D preview.
Manually re-formatting the Illustrator-SVG is not an option here, so I hope you can point me to a few useful resources to solve the incompatibilities.
Thank you very much !
You can convert .svg to .json.
After it's simple to use with Raphaël, Three.js or D3.js
Converted files are simple to use.
Edit : More informations
//jsfiddle.net/yprgsvk7/ -> JsFiddle exemple