html2canvas 調整圖片大小並下載

Question

我有下面的代碼，我需要這個生成的圖像，在 1080x1080 中生成，我該如何繼續，然后以 1080x1080px 下載圖像，如何增加我的代碼來實現它？ 目前它會生成 537x537px 的 canvas ，然后以該尺寸下載，但我希望它以 1080x1080 和出色的屏幕截圖質量完成

<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>

Answer 1

html2canvas 有一組選項。 見http://html2canvas.hertzen.com/configuration/

目前，您設置的唯一選項是在 canvas 完成渲染后運行的 function。 您沒有設置寬度或高度或給它一個 canvas 所以它為您創建一個。

您可以嘗試將高度和寬度添加到選項集：

html2canvas(element, { width: 1080, height: 1080,
    onrendered: function (canvas) {
        $("#previewImage").append(canvas);
        getCanvas = canvas;
    }