Remove spaces from the image div using Canvas

Asked

Viewed 66 times

0

I have a div, where I’m saving the content using canvas

<div class="container-capa">
    <img src=~/Content/imagemcartaovisita/@Session["NomeCapaCartao"] class="img-responsive" id="capa" alt="" width="589" height="324">
    <label id="caminhosite">@Session["CaminhoSiteUsuario"]</label>
</div>

In Js function I am passing the same image size,

$(function () {
    $("#btnSaveCartaoCapa").click(function () {
        html2canvas($(".container-capa"), {
            onrendered: function (canvas) {
                theCanvas = canvas;
                // document.body.appendChild(canvas);

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

And in css:

.container-capa{
    left: 0px;
    top: 0px;
    padding-bottom: 0%;
    padding-top: 0px;
}

The problem is that when saving the file the image does not come in the correct size, comes a blank space, the image comes with W280 and H300: Red would be the image and green would be the white space

inserir a descrição da imagem aqui

  • padding-bottom: 0%; that is valid ? PS: That image burned my eyes

  • @Mauroalexandre, At least your comment was funny, now ask if padding-bottom exists was too kkk

  • I asked for the percentage.

  • Yes, there is property-css-padding on the maujor site, see there!

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.