Convert SVG with foreign objects to zoomable PDF javascript - javascript

I want to convert an SVG to PDF file on the frontend. I am using React and drawing a chart using d3 and I want to be to print the chart as a PDF. However, all of the solutions I have tried dont work for some reason. Mostly due to the fact that my chart includes foreignObjects as nodes.
The only working solution I have is through html2canvas and jsPDF. I convert the svg to canvas and then png and later print it using jspdf this solution prints the graph correctly but as it prints as an image the text is pixelated as I zoom in. I am looking for a solution that allows me to zoom in without breaking quality ( I dont know if thats even possible, even if it is upto 200% it should work)
I would like to know any suggestions you may have

Related

Retrieve paths already on HTML canvas

I am working on a little tool to measure architectural drawings from PDF files. The PDF is rendered by Mozilla pdf.js on to a canvas. Once rendered, I would like to get coordinates all the paths/lines/rects on the canvas. This is to make the tool snap to the endpoints of lines when the mouse cursor is nearby. There don't seem to be an API for retrieving that. As it is not my code that actually renders onto the canvas, I dont path information beforehand.
What I have so far tried is, modify the pdf.js to emit the endpoints' x,y based on moveTo and lineTo, save them in an array. Using this array I can snap correctly in simple drawings. For complex drawings, there seems to be lot of transformations applied and this simple procedure doesnt work.
Any ideas on how to go about it?

Creating a HTML5 - Image Editor which uses SVG

I'm trying to create a simple 'image editor' using HTML5/Javascript that allows to load an image (.png for instance), draw/move/delete different shapes onto that image, and retrieve the coordinates of these shapes drawn to modify the original image.
I've been reading quite a lot regarding SVG and canvas, and my final thought was to go with SVG, as it's handling all the different object states etc. Looking at different examples of code though I'm not sure anymore if SVG is the right way to go...is it even possible to accomplish what I want using SVG?
Update:
The problem is basically to ensure that the chosen strategy (SVG/canvas) supports loading an image, drawing additional shapes, and retrieving the coordinates in a way that modifications on the original image result in the same picture as shown in the editor.

SVG to PNG Full SVG image

I am using the library http://www.getorgchart.com/ to produce a large organisational chart diagram. This renders the chart in <svg></svg> tags.
My problem is, the built in "print" function doesn't print the entire chart, just the visible section. As my chart has around 180 people on it, it expands horizontally quite far!
What I need to be able to do, is capture all the SVG data and export it to PDF/PNG/JPG whichever of these (PDF would be ideal with the scalability intact). I've tried several libraries to try and complete this task, and failed thus far! I've tried using canvg and also other libraries that i've found such as https://github.com/exupero/saveSvgAsPng (which worked to an extent but all the line paths were messed up and it only printed the visible section of the svg not the entire chart).
UPDATE Solution must be either client-side or easily implemented on internal servers!
Using the last library I had:
$(document).ready(function(){
$('#printme').click(function(){
saveSvgAsPng(document.getElementById("svgChart"), "diagram.png");
});
});
Does anyone have a solution for this?

Download C3 chart as pdf as given download option in D3 graphs

I'm working on product where I generated C3 chart successfully. But problem is that I'm not able to download these graph as pdf or png. Even I don't know C3 libraries are providing this features.
Please suggest me if there is any way to download c3 chart as pdf or png. I want to download particular graph by clicking on button as d3 graph. Thanks in advance.
The problem is that those libraries are rendering your graphs as SVG, inline in the page. What you need is a way to get the rendered SVG (plus styles), and then if necessary to convert it to a PNG / PDF.
If you only want to do it every once in a while, this is something you can do by hand. There is [a bit of semi-official documentation from D3's creator on the subject. You can also have a look at the answers to these other questions.
If you want to do it programmaticaly, as a "Download this chart" feature on your site, there are multiple ways to go:
You can use jsdom to render your graph server-side, save the SVG and then use a tool like ImageMagick to convert it to PNG.
PhantomJS can render your page and take a screenshot of the chart. Here is very similar StackOverflow question with a good answer using PhantomJS.
Note: If the chart looks correct on canvas, I assume the following would work with C3 or any other chart:
I found that since I have to support IE 11 I instead went with canvas to blob to PNG using "canvas-toBlob.js" and "FileSaver.js"
$("#save-btn").click(function()
{
$("#myChart").get(0).toBlob(function(blob)
{
saveAs(blob, "chart_1.png");
});
});
https://jsfiddle.net/mfvmoy64/155

Conversion of JPEG to SVG in Javascript

Can anyone help... how to convert Image to Vectors (SVG) through Javascript.......! Any help will be awesome....!
Three options
Use Online convert's API
http://apiv2.online-convert.com/
Run your own node.js server and use Potrace or AutoTrace
https://www.npmjs.com/package/potrace used by Online convert
https://www.npmjs.com/package/autotrace
Or use imagetracerjs client side.
https://github.com/jankovicsandras/imagetracerjs
This project supports both bitmap to SVG and SVG to bitmap (png/jpeg/gif/etc),offers flexible settings, different renderers, JavaScript API for node.js and browser, and Command line .
If configured correctly it generates good results and small svg size. If you just want to transform logos / drawings then no config is needed but if photographs / realistic paintings then some you need to play with the settings until satisfied with size / quality ratio.
https://www.npmjs.com/package/svg-png-converter
It has a playground although right now I'm working on a better one since more features has been added:
https://cancerberosgx.github.io/demos/svg-png-converter/playground/#
What you're asking isn't really possible. I mean, you could try to do it, but I doubt the results would be particularly satisfying.
SVG to JPEG is a one-way conversion; converting a raster image to a vector image is non-trivial, see this question.
I too was looking for a simple conversion from image to svg - however it is not that easy, but I did find a tool which could take simple images (black and white) and transform them into svg files, also result was much nicer, since it somehow smooth the edges out - however when trying with color images, it did not work.
If you want to make simple images and then later tranform into svg, then using an online converter could help you
I used this to convert a couple of simple .png images to .svg
http://image.online-convert.com/convert-to-svg

Categories

Resources