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="nome@email.com" 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>
        </select>

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

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

</div>

<script src="https://www.sankhya.com.br/wp-content/themes/understrap-child/html2canvas.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"-->
<!--    integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="-->
<!--    crossorigin="anonymous"></script>-->

<script>

jQuery(function($){

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

        $("#conteudo-nome").html(inputNome);
        $("#conteudo-frase").html(inputFrase);

        html2canvas(element, {
            onrendered: function (canvas) {
                $("#previewImage").append(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);
    });

});

</script>

50 thoughts on “html2canvas resize image and download”

Leave a Comment