I have a canvas which shows a graph and I'm trying to take a screenshot of the canvas using html2canvas() with the code below :
<div class="chartContainer" id="chart1"></div>
<div id="displayCanvas" style="display:none;" class="stx-dialog"></div>
html2canvas($('#chart1'),{onrendered:function(canvas1)
{$('#displayCanvas').append(canvas1)}});
Here when the chart container is loaded the it uses the div with the id "displayCanvas" and appends the screenshot of the canvas.
How can I download the screenshot of the canvas which is displayed? I have already tried using something like below to download the image:
var link = document.createElement('a');
link.download = stx.chart.symbol+".png";
link.href = stx.chart.canvas.toDataURL("png");
link.click();
but it only downloads the data on the canvas as an image without the background (it does not download the screenshot but only the data) which when opened after downloading shows a black screen with data in it. Can anyone help me on how to download the image directly of the screenshot taken from the html2Canvas()?
I have a canvas which shows a graph and I'm trying to take a screenshot of the canvas using html2canvas() with the code below :
<div class="chartContainer" id="chart1"></div>
<div id="displayCanvas" style="display:none;" class="stx-dialog"></div>
html2canvas($('#chart1'),{onrendered:function(canvas1)
{$('#displayCanvas').append(canvas1)}});
Here when the chart container is loaded the it uses the div with the id "displayCanvas" and appends the screenshot of the canvas.
How can I download the screenshot of the canvas which is displayed? I have already tried using something like below to download the image:
var link = document.createElement('a');
link.download = stx.chart.symbol+".png";
link.href = stx.chart.canvas.toDataURL("png");
link.click();
but it only downloads the data on the canvas as an image without the background (it does not download the screenshot but only the data) which when opened after downloading shows a black screen with data in it. Can anyone help me on how to download the image directly of the screenshot taken from the html2Canvas()?
Share Improve this question asked May 15, 2018 at 13:35 PhoenixPhoenix 531 gold badge1 silver badge6 bronze badges4 Answers
Reset to default 18TRY THIS:
In the HTML:
- Give the element that you want to screenshot, an ID of "capture".
- Give the button/element that you would need to click to take the screenshot, an ID of "btn".
- Load the
html2canvas.min.jsfile.
In the Javascript:
- Create the
capture()function. - Bind the
capture()function to whatever event you are using—in this case it's on the btnclickevent. - DONE! Watch the magic happen when you click on the btn.
HTML:
<h1 id="capture">Hellooooo</h1>
<button id="btn">Capture</button>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
Javascript:
function capture() {
const captureElement = document.querySelector('#capture') // Select the element you want to capture. Select the <body> element to capture full page.
html2canvas(captureElement)
.then(canvas => {
canvas.style.display = 'none'
document.body.appendChild(canvas)
return canvas
})
.then(canvas => {
const image = canvas.toDataURL('image/png')
const a = document.createElement('a')
a.setAttribute('download', 'my-image.png')
a.setAttribute('href', image)
a.click()
canvas.remove()
})
}
const btn = document.querySelector('#btn')
btn.addEventListener('click', capture)
Here's the JSFiddle