I'm trying to make a button to capture and save my page in png.

For now, I can duplicate it with the resolution I need, but instead of showing it need to show a dialog and save it like "Save as..." to rename the file.

function myRenderFunction(canvas) {
  destination.appendChild(canvas);
}

var element = document.getElementById('element');
var destination = document.getElementById('destination');



html2canvas(element, {
  scale: 3,
    onrendered: myRenderFunction
});

Here is a JSFiddle of my current process.

I'm trying to make a button to capture and save my page in png.

For now, I can duplicate it with the resolution I need, but instead of showing it need to show a dialog and save it like "Save as..." to rename the file.

function myRenderFunction(canvas) {
  destination.appendChild(canvas);
}

var element = document.getElementById('element');
var destination = document.getElementById('destination');



html2canvas(element, {
  scale: 3,
    onrendered: myRenderFunction
});

Here is a JSFiddle of my current process.

• javascript
• save
• capture
• html2canvas
• save-as

1 Answer 1

To save the image locally you can change your render function to the following:

function myRenderFunction(canvas){
    var a = document.createElement('a');
    // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
    a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
    a.download = 'somefilename.jpg';
    a.click();
}

This is from an answer of stackoverflow How to save img to user's local puter using HTML2canvas