0

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>
Avi Thour
  • 380
  • 1
  • 5
  • 23
  • can you share element with id 'output' – Naga Sai A Dec 31 '18 at 20:54
  • @NagaSaiA Done. – Avi Thour Dec 31 '18 at 21:06
  • can you share your console errors from developer tools? – Naga Sai A Dec 31 '18 at 21:11
  • @NagaSaiA [Vue warn]: Property or method "date" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. (found in ) vue.js:616:9 You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html – Avi Thour Dec 31 '18 at 21:18
  • I just created sample codepen for reference and it is working fine - https://codepen.io/nagasai/pen/jXavqm – Naga Sai A Dec 31 '18 at 21:19
  • @NagaSaiA For me it's working aswell. The only problem is that it;s not saving the image. – Avi Thour Dec 31 '18 at 21:21
  • I have updated codepen - https://codepen.io/nagasai/pen/jXavqm and created save method to download to local which is missing in your code – Naga Sai A Dec 31 '18 at 21:25

1 Answers1

2

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

enter image description here

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

Naga Sai A
  • 10,771
  • 1
  • 21
  • 40