How can I get screenshot of a div container with class row?

Question

Consider we have a simple div container inside an html page which has lots of other stuff too. I am seeking to design a button for users, so when clicked, it returns the screenshot image of only that particular container.

I am currently working inside a django project and wondered maybe there is a pure html solution to this without using python. However in my searches I haven't found anything on python that can help me on this either.

For example the div looks something like this:

<div class="row" style="height:1200px; overflow-x: hidden;" id="The_chart_that_we_want_its_screenshot"></div>

The id is triggered by a jQuery or ajax code later in the html script which loads a chart based on some data (which is constantly changing) from database. And since every time the user opens that html page, a different chart is shown in that container, this button is needed for the sake of user's reporting needs.

Edit: I have checked all other posts in StackOverFlow. They all work on normal divs. But not on my div, because of the class="row". It seems that this class makes the screenshot blank with a color strip in the right of the image. In other words the screenshot pushes all the content of that container to the left and shows it as a narrow vertical colored strip which off course nothing can be seen from the real thing. Don't know why that is.

I also have a feeling that maybe `django forms` can be helpful here, but do not have a clue how! — Mike, Aug 28 '19 at 20:37
@DanielRoseman Sorry. It is triggered by some ajax. Not java — Mike, Aug 28 '19 at 20:46
Possible duplicate of [Using HTML5/Canvas/JavaScript to take in-browser screenshots](https://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-in-browser-screenshots) — ipaleka, Aug 28 '19 at 20:46
@ipaleka , unfortunately that's not what I am looking for. That question talks about selecting an area inside the html page. I am talking about a simple container that is already there. And I also I am using combination of html and ajax to connect with django backend. I mistakenly said Java instead of ajax — Mike, Aug 28 '19 at 20:50
[Well](https://stackoverflow.com/a/14723900/11703358): `html2canvas($('#div'), {onrendered: function(canvas) {var img = canvas.toDataURL() window.open(img);}});` using accepted answer for linked SO question. — ipaleka, Aug 28 '19 at 21:04
I guess that might be it. Thanks. Where should I put this code? Is is possible to put it inside something like this: `$('#button_for_div_screenshot').click(function() {...` — Mike, Aug 28 '19 at 21:37
Yep, just [download the javascript file](https://github.com/niklasvh/html2canvas/releases) and place it inside your `static` directory. — ipaleka, Aug 28 '19 at 22:12
@ipaleka Your answer and links helped me on new keywords to search more on the problem. But among the almost 20 different posts I saw in SO and elsewhere, unfortunately none work properly. Each of them bump up into different errors which when I check those errors again nothing useful is reached. The most frequent error I bump into is `Uncaught (in promise) Error: Element is not attached to a Document`. Do you think I should ask a new question? — Mike, Aug 29 '19 at 08:36
@ipaleka Based on different answers I tried using `document.getElementById('the_id')` and even some weird stuff like `document.getElementById('the_id').parentNode.style.overflow = 'visible'`. But still no success. Even when I pass these errors, `html2canvas` seems to not work properly and it returns blank images. Is there any other tool than `html2canvas` that can be used? — Mike, Aug 29 '19 at 08:38
@ipaleka Ok Thanks. I have realized what the origin of the problem is. All of this works on normal `div`s. The reason that it does not work on my `div` is that is has `class="row"`. When I remove that in `styles` it works. But I need the `class="row"`. I should now find a way to resolve this. — Mike, Aug 29 '19 at 09:25

How can I get screenshot of a div container with class row?

0 Answers0