html2canvas image not saving

Question

Image is loading properly when I click the button but I am not able to download it. it's just showing on the div. Everything is working fine just image is not saving.

My HTML and JS:

<script>
        
document.getElementById("download").addEventListener("click", function() 
{
	html2canvas(document.getElementById("output"), {allowTaint: true}).then(function(canvas) 
	{
	    document.getElementById("output2").appendChild(canvas);

	});
});

</script>

<button type="button" id="download" class="btn btn-success">Preview Image</button>
<div id="output2"></div>

<div id="output" class="dark-mode">
    <h1><b>{{heading}}</b></h1>
    <i class="fa fa-twitter" id="author"></i> <a id="authorname">{{author}}</a>
    <span id="time" class="date">{{date}}</span>
    <p>{{news}}</p>
    <img :src="image" width="100%"/>
    <p id="img_text">{{caption}}</p>
</div>

Answer 1

To achieve expected result, create save method

document.getElementById("download").addEventListener("click", function() 
{
	html2canvas(document.getElementById("output"), {allowTaint: true}).then(function(canvas) 
	{
	    document.getElementById("output2").appendChild(canvas);
    saveAs(canvas.toDataURL(), 'file-name.png');

	});
});

function saveAs(uri, filename) {

    var link = document.createElement('a');

    if (typeof link.download === 'string') {

        link.href = uri;
        link.download = filename;

        //Firefox requires the link to be in the body
        document.body.appendChild(link);

        //simulate click
        link.click();

        //remove the link when done
        document.body.removeChild(link);

    } else {

        window.open(uri);

    }
}

#output2 {
  border: 1px solid black;
}

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

<button type="button" id="download" class="btn btn-success">Preview Image</button>
Output 2 - <div id="output2"></div>

<div id="output" class="dark-mode">
    <h1><b>{{heading}}</b></h1>
    <i class="fa fa-twitter" id="author"></i> <a id="authorname">{{author}}</a>
    <span id="time" class="date">{{date}}</span>
    <p>{{news}}</p>
    <img :src="image" width="100%"/>
    <p id="img_text">{{caption}}</p>
</div>

codepen - https://codepen.io/nagasai/pen/jXavqm

Downloading below image

Please refer below link for different save options Download html2canvas image to desktop