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

Question

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

Navigation

#1 by (0 votes)

0

I'm using canvas2image.js to transform a div into an image, everything works, the problem, I need to set a format for the image at the time of saving, without it it is left 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);
            }
        });
    });
});

javascript jquery css asp.net-mvc

asked by anonymous 04.11.2016 / 16:26

1 answer

Transparent StatusBar Encrypted password verification

score 0 · Answer 1

Can be solved by making an adaptation to the saveFile function of JavaScript Canvas2Image .

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

Edit your file canvas2image.js , search 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;
}