Convert contents of div into an image to insert to pdf - javascript

Here's my situation. I have to make a report with graphs. I have already successfully created graphs (bar, pie, and line) using ChartJS and displayed them in my page. However, I want to put a "print" button which, when clicked, will generate a pdf containing all of the graphs created.
For my other pages (which are only forms), I have used TCPDF and it's working well. However, I can't use it again for the graphs because what I produced are widgets placed in div elements.
My plan is to convert the contents of these div elements (the graphs) into an image so I can insert it in TCPDF.
Is there a way for me to convert the contents of the div into an image?
I can't use canvas.toDataURL() like in this link because ChartJS puts their graphs in a DIV element and NOT canvas. I also found out I can't put div inside a canvas (see link).
Please help me (T^T)

Related

I have a plotly and flourish graph in my web page and I wanted to use javascript to automatically capture a screenshot of the web page including graph

I am currently using html2canvas library to get screenshot of the page when it first loaded but it does not capture the graph and shows a blank space in place of those graphs. So is there any other way to get screenshot of those graphs created by flourish/plotly library?

How to put overlay text using d3.js (javascript) in html

I have a graph created in javascript (its just a d3.js graph). I thought it would be cool to have a title overlying the graph in a webpage. I understand html layouts and that overlying html can't be done this way. Is there a way I don't understand or am I going to have to try to render text on the graph as part of the javascript?

Saving a Google Chart Wrapper to image

How can I save a Chart Wrapper to an image (png, jpg, bmp ... i don't care) at a click of a button.
A normal google chart is not a problem, you just need to right click on it and save as image.
But how would you save an image of a chart in a Google Chart Wrapper???
I think the relevant documentation you're looking for is on the Charts API Website. This method will display the chart as a PNG formatted image instead of SVG. You will lose your interactive features like tooltips and selections.
If you still want those features you could write a link that pops the static chart image into a new window to be saved.
Since you're using a ChartWrapper you will need to use something like:
var imageUri = chartWrapper.getChart().getImageURI();
The Uri it returns is a base64-encoded PNG image, which most modern browsers will render as an image if used as the src attribute for an img tag, or just entered directly into the address bar.

Hide HTML outside of canvas element in the JavaScript tool InfoVis

I'm currently creating a visualization of some objects on my project and I'm using the InfoVis toolkit to handle the graph visualization part. So far I have the nodes plotted correctly and relating to each other correctly, but there is a graphical error that is bothering me. When a node is partly off of the canvas, the background of the node is hidden (as it should be) because it is a canvas element itself. However, the contents (which are HTML) are shown completely and they hang off of the canvas element.
You can see the visualization here: Link
Drag around the graph until one of the nodes is partly off the screen and you'll see it. It is more obvious on the right/bottom sides.
Here is a picture of the problem: The black border is the canvas border.
How can I stop this from happening?
Try setting overflow: hidden on the div with the ID infovis-canvaswidget. It looks like the Canvas element is injected into it.

How to save several text written using fillText on canvas to Google chrome cache

I have an image on my canvas . the canvas is annotated with text on top of the image. I wrote the text using canvas.fillText(). How do i save this text to the google chrome cache. I can use HTML5 or js.
You have to save the text in variables as you write it on to the canvas. The canvas element does not retain the internal structure of what you've written on to it, once something is drawn it's just pixels, the only way to get it back would be to implement some sort of OCR in JavaScript.
If you want to retain the structure of the elements you're adding to a dynamic picture then use SVG instead.

Categories