html2canvas resize image and download

I have the following code below, and I need this image that is generated, to be generated in 1080×1080, how can I proceed, and after that the image is downloaded with 1080x1080px, how can I increase my code to make it happen?
Currently it generates the canvas with 537x537px and after that it downloads in that size, but I want it to be done in 1080×1080 and in excellent screenshot quality

<div class="formulario">
    <form id="geradorPublicacao" name="geradorPublicacao">
        <label for="frase">Escreva aqui o que é liberdade para você e gere seu próprio pensamento para compartilhar nas
            redes sociais:</label>
        <textarea id="input-frase" name="frase" rows="4" cols="50" maxlength="150"></textarea>

        <label for="nome">Nome</label>
        <input type="text" id="input-nome" placeholder="Seu nome" required>

        <label for="email">Email</label>
        <input type="email" id="email" placeholder="" required>

        <label for="select">Você já conhece a Sankhya?</label>
        <select name="select" id="select">
            <option value="Sim, sou colaborador">Sim, sou colaborador(a)</option>
            <option value="Sim, sou cliente">Sim, sou cliente</option>
            <option value="Não, mas quero conhecer">Não, mas quero conhecer</option>

        <button id="btn-Preview-Image" type="submit">Criar publicação</button>

    <div id="teste-imagem">
        <span id="input-nome"></span>
        <span id="input-frase"></span>
    <div id="previewImage" style="display:none;"></div>


<script src=""></script>
<!--<script src=""></script>-->
<!--<script src=""-->
<!--    integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="-->
<!--    crossorigin="anonymous"></script>-->



    var element = $("#teste-imagem"); // global variable
    var getCanvas; // global variable
        var inputNome = $('#input-nome').val();
        var inputFrase = $('#input-frase').val();
        var scrollPos = document.body.scrollTop;


        html2canvas(element, {
            onrendered: function (canvas) {
                getCanvas = canvas;
        // return false;

    // $("#btn-Preview-Image").on('click', function (e) {
    //     e.preventDefault();

    // });
    $("#btn-Convert-Html2Image").on('click', function (e) {
        var imgageData = getCanvas.toDataURL("image/png");
        // Now browser starts downloading it instead of just showing it
        var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
        $("#btn-Convert-Html2Image").attr("download", "liberdade.png",).attr("href", newData);



50 thoughts on “html2canvas resize image and download”

Leave a Comment