How to define the image format when saving the file using "html2canvas"?

Question

I am using canvas2image.js to turn a div into an image, everything works, the problem, need to define a format for the image at the time of saving, without it it is without a valid format.

Example:

<link href="~/Content/css/CarimboBanner.css" rel="stylesheet" />
<script src="~/ContentAdmin/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="~/Content/js/html2canvas.js"></script>
<script src="~/Content/js/canvas2image.js"></script>
<script src="~/Content/js/CarimboImagens.js"></script>


<div class="carimbo-foto">
<img src="http://img.vmessages.com/en/funny/35.jpg" class="img-responsive" id="carimbo" alt="" width="90" height="98">
<img src="https://thumbs.dreamstime.com/t/bandeira-horizontal-de-cloudscape-43923748.jpg" class="img-responsive" id="banner" alt="" width="560" height="315">
<img src="http://cdnqrcgde.s3-eu-west-1.amazonaws.com/wp-content/uploads/2013/11/jpeg.jpg" class="img-responsive" id="qrcode" alt="" width="80" height="80">
</div>

JS:

$(function () {
    $("#btnSave").click(function () {
        html2canvas($(".carimbo-foto"), {
            onrendered: function (canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image
                Canvas2Image.saveAsPNG(canvas);
                //$(".main-footer").append(canvas);
                // Clean up
                //document.body.removeChild(canvas);
            }
        });
    });
});

Answer 1

Can be solved by making an adaptation in function saveFile javascript Canvas2Image.

The idea is to create an element anchor via JS, set the toDataURL() and file name along with its extension and run the download.

Edit your file canvas2image.js, look for saveFile and change according to the following code:

function saveFile (strData) {
    //document.location.href = strData;
    downloadURI(strData,"img.png");
}

function downloadURI(uri, name) {
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    delete link;
}